How to modify Bender theme?

[exichlo]

How to modify Bender theme
Bender's css style is done with SASS (Syntactically Awesome Stylesheets). Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS), it makes easier to work with styles in your website.


Requisites
SASS require to be compiled, this is done with a Grunt task, and Grunt runs on NodeJS


First install NodeJS form the official website


Later you need to install Grunt and all its dependencies, on your Osclass root folder user this command

npm install

Hoorray! You have Grunt installed and working (Once you have nodeJS and grunt install, you don't need to do this again)

Doing some CSS work
The main file (main.css) is located on bender/css folder and is minified (your page will load faster). Modifying main.css is possible, but could be really had to do. Instead, it's better to modify and work with the sass files (.scss) located in bender/sass.

Once you modify the files, you need to "compile" and minify them, we have set up a Grunt task to do it, go to your Osclass root folder and use the following command

grunt sass

Can anyone translate this into simple English?

I'm using cpanel and ftp.

[design]

I believe that is what you use if you are working on a local server, before you launch a live site.
other wise, it depends on how much you want to change. simple notepadxx or other text editor will work, also using web developer tools.

[exichlo]

Thank you for your answer!

Do you happen to know how to fix the main.css file? The file I have is one looooong line. It's so pain in the ass to do modification.

[design]

attach the file to a reply, I'll unminify it for you and attach it back. will need to zip it

[exichlo]

Thank you a lot! I search the net and was able to unminify the css file.

Can you help me with adding a word into header.php?

Basically I want to add the and word like this: Login and Register for your free account

[design]

where do you want it added? - screen shots work for this

[exichlo]

The word "AND" in between the Login and Register for a free account.

[design]

anywhere you see this - you can change what is in the red and it will appear on the site. *disclaimer* this is only for a few scattered words, not as a language translator

<?php _e('E-mail', 'bender') ; ?>

[exichlo]

Sorry, I was meaning adding the word "OR" like the image attached.

I have tried to add the word in the header.php file but it didn't came out right.

Code: [Select]

    <div class="wrapper">
        <div id="logo">
            <?php echo logo_header(); ?>
            <span id="description"><?php echo osc_page_description(); ?></span>
        </div>
        <ul class="nav">
            <?php if( osc_is_static_page() || osc_is_contact_page() ){ ?>
                <li class="search"><a class="ico-search icons" data-bclass-toggle="display-search"></a></li>
                <li class="cat"><a class="ico-menu icons" data-bclass-toggle="display-cat"></a></li>
            <?php } ?>
            <?php if( osc_is_web_user_logged_in() ) { ?>
                <li class="first logged">
                    <span><?php echo sprintf(__('Hi %s', 'bender_red'), osc_logged_user_name() . '!'); ?>  &middot;</span>
                    <strong><a href="<?php echo osc_user_dashboard_url(); ?>"><?php _e('My account', 'bender_red'); ?></a></strong> &middot;
                    <a href="<?php echo osc_user_logout_url(); ?>"><?php _e('Logout', 'bender_red'); ?></a>
                </li>
            <?php } else { ?>
                <li><a id="login_open" href="<?php echo osc_user_login_url(); ?>"><?php _e('Login', 'bender_red') ; ?></a></li>
                <?php if(osc_user_registration_enabled()) { ?>
                <li><a href="<?php echo osc_register_account_url() ; ?>"><?php _e('Register for a free account', 'bender_red'); ?></a></li>
                <?php }; ?>
            <?php } ?>
            <li class="publish"><a href="<?php echo osc_item_post_url_in_category() ; ?>"><?php _e("Publish your ad for free", 'bender_red');?></a></li>
        </ul>
    </div>


[design]

 <li><a id="login_open" href="<?php echo osc_user_login_url(); ?>"><?php _e('Login', 'bender_red') ; ?></a> or </li> make sure you add a space after the </a> and before the the </li> so you words don't run in together

[exichlo]

Works like charm! Thank you very much!