Need help? Check out our Support site, then


Duster Theme Help need it, customizing CSS

  1. 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.

  2. 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.

  3. 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;
    }
  4. Excellent, thank you very much thesacredpath it worked perfectly.
    Any suggestion for my second post?

  5. 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;
    }
  6. Thank you very much one more time!.

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

  8. 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?

  9. alwayswellwithin
    Member

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

  10. 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.

  11. alwayswellwithin
    Member

    Alonso,

    This one?

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

    Thanks!

  12. alwayswellwithin
    Member

    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!

  13. @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.

  14. alwayswellwithin
    Member

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

  15. 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.

  16. @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?

  17. 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)

  18. 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)

  19. 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.

  20. 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?

  21. Sometimes the browsers will end up using the CSS file they have in the cache. Force refresh the preview page. That typically fixes the issue.

  22. Hi The Sacred Path, I added the css and bought the upgrade but still no change. Any idea?

  23. I just looked, and see none of the above CSS in your custom CSS files on your site.

    Did you click "save stylesheet" making sure that "add to existing..." is checked?

  24. I just looked, and see none of the above CSS in your custom CSS files on your site.

    Did you click "save stylesheet" making sure that "add to existing..." is checked?

  25. @ thesacredpath,

    I'm trying to duplicate the gadrient menu bar color that you see here http://custom-android.net/ into this new blog here http://thecustomandroid.com/blog/ and I just can't get it to work like it should. I've try using the same notes that you provide me before but they seem not to do anything about it. Any help will be much appreciated.

  26. @alonsou, sorry the blog you reference is self-hosted and you need to head over to http://wordpress.ORG/support/ as that is where self-hosted wordpress blogs using the software from wordpress.ORG are supported.

    These forums are for those hosted here on the wordpress.COM free hosting service and things here work differently.

    If you are not familiar with the differences, see this support document: http://en.support.wordpress.com/com-vs-org/ .

  27. Yes I did, so confused about why it is not working. Can you email me on [email redacted] and maybe you can login and help me out that way?

  28. I'm sorry but there is no Staff support for CSS editng and precious little Volunteer support. Volunteers answering support questions do not provide support by email. Since there is no official Staff support for the CSS upgrade, and precious little Volunteer support, it's recommend that you do not buy the upgrade unless you have at least moderate understanding of HTML and CSS because you must be prepared to do the work on your own.

  29. I bought the upgrade in case it was just the preview that wasn't working - can you advise further?

  30. and I do have an understanding of CSS and html - I can't write the code myself, but know what to do with it and have done it successfully on other sites, but it is not working on this one for some reason.

Topic Closed

This topic has been closed to new replies.

About this Topic