Duster Theme Help need it, customizing CSS

  • Author
    Posts
  • #578278

    alonsou
    Member

    Hello,

    I need a little bit of help with the Duster theme of my blog http://custom-android.net/ I have recently purchase the option to personalize CSS, I’ve been playing around with it and need a little bit of help in order to have it as I want it. Can someone help me finding the right code to be modify?

    1.- I want to get rid of the blank empty space just right above the banner, and move up the banner, also get rig of the search option on the upper right corner, I will install another one on the widget location.

    2.- I want to change the whole background color from black to maybe a white…

    3.- By changing the background I will need to change the color of the “pages” just below the banner.

    Thanks for your help!

    Alonso

    The blog I need help with is custom-android.net.

    #578383

    alonsou
    Member

    UPDATE: I was able to change the background to a white, however I would like to see if its possible to know the code for changing the background of the bar just below the banner instead of changing the “pages” text color.

    #578396

    Add the following to your CSS and then go back to settings > general and add back in the site title and the tagline. I’ve hidden them with the below code so they will not show, but search engines will be able to find them, and it really helps if they can see the site title and tagline when it comes to SEO.

    #searchform, #site-title, #site-description {
    display:none;
    }
    #578398

    alonsou
    Member

    Excellent, thank you very much thesacredpath it worked perfectly.
    Any suggestion for my second post?

    #578400

    The background for the nav menu is here (it was “transparent” but I set it to black:

    #access {
    background: none repeat scroll 0 0 #000000;
    }

    The original was set up as a linear gradient, so you might play around with this. The first hex color number is the top, and the second is the bottom. I pulled a green out of your header image just as an example.

    #access {
    background: -moz-linear-gradient(#45670D, #0A0A0A) repeat scroll 0 0 transparent;
    }
    #578402

    alonsou
    Member

    Thank you very much one more time!.

    #578403

    alonsou
    Member

    Ok.. I guess I’ll stick with the gradient option, it looks much much better that just plain black.

    #578406

    alonsou
    Member

    One more question before I have to start paying for your invaluable help… the 2 “column’s on the left and right of the page, before I was able to set them black to match with the black background, but how I go in order to take them off the stylesheet and strech the banner and nav menu?

    #578407

    Alonsou, I love what you’ve done! Can you share the CSS code for taking the white space off the top? Thanks.

    #578408

    alonsou
    Member

    alwayswellwithin,

    Thanks for your kind comments, to take off the blank space above the banner just follow “thesacredpath” first answer and that should do the trick.

    #578409

    Alonso,

    This one?

    #searchform, #site-title, #site-description {
    display:none;
    }

    Thanks!

    #578410

    SacredPath,

    When we turn the headline off on the header page, but leave the text in on settings page do we still need this code for search engines to find us?

    Thanks!

    #578411

    @alonsou, the problem is the nav and header are nested within #page which means that actually determines the width of those elements. Making the header and nav full width would require taking the flexible width of the theme away. It can be done, but it would be quite a lot of work.

    #578416

    Sacred Path, I get it, we only need that code if we remove the space where the text was hiding. Txs.

    #578418

    The code above only makes the title and tagline invisible to visitors. It is still there for the search engines to see as long as you have them entered at settings > general.

    #578894

    thinkactvote
    Member

    @thesacredpath

    Can you help me too? I would like to change all the blue text and underlined blue links to another colour – like magenta – #F530D5

    Also when you click on a page there is a big gap between the menu bar and where the part texts starts, can this be changed?

    Also if I wanted to add a twiiter/facebook/you tube button onto the top right corner, how would i do this?

    #578895

    thinkactvote
    Member

    also it might be cool to change the colour of the menu bar from black to something brighter (which might also mean I have to change the colour of the menu font)

    #578896

    thinkactvote
    Member

    also it might be cool to change the colour of the menu bar from black to something brighter (which might also mean I have to change the colour of the menu font)

    #578897

    First off, go to settings > reading and reduce the number of posts to show on the posts pages to something like 5. It takes forever for your site to load on my wireless internet connection and this is bad for two reasons. First the search engines will dock your search engine ranking since the consider page loading times when calculating ranking. Secondly, there are still a whole lot of people out there on slower (1.5Mbps) internet connections, and with the impatience and short attention span of web surfers now days many will simply click away instead of waiting for your site to load.

    The following takes care of the link colors, and also takes care of the wide gap above the titles on the static pages.

    #content nav a, .widget a, .entry-title a:hover, .entry-content a,  {
    color: #F530D5;
    }
    
    .singular.page .hentry {
    padding: 1em 0 0;
    }

    The menu bar is done as a linear gradient. The first color is the top and the second color is the bottom. Not much of a difference between the two colors.

    #access {
    background: -moz-linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 transparent;
    }

    As far as adding icons at the top right in the header area, what you will have to do is to put them into a text widget and then reposition the text widget up to that area.

    This is how you would do the stuff in the text widget.

    <div id="soc-media">
    code for your social media buttons here
    </div>

    And this is what you would add to the CSS:

    #page {position: relative;}
    
    #soc-media {
    right: 0;
    top: XXpx;
    position: absolute;
    }

    The top and right values will have to be adjusted to get things placed where you want them.

    #578902

    thinkactvote
    Member

    Thanks so much for this. I have changed the settings to 5 posts. I added this CSS but nothing happened in the preview. Any idea why?

The topic ‘Duster Theme Help need it, customizing CSS’ is closed to new replies.