Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

12

Small change in Sundance

  1. ateaoscemxs
    Member

    Hi people.

    My blog is http://ateaoscem.com
    and i have Custom Design.
    I want to change the theme to Sundance.

    For several days, i put a topic in the Theme forum, but nobody answered me.

    In my test blog:
    http://ateaos100.wordpress.com
    i already have the Sundance Theme to test.
    However, i don't know two things:
    1) How can i change the colour of the posts area.
    2) Why the right side margins of the video are are not correct.
    I want to put the area of posts, white, and the margins will not be well!

    Anyone can help me, please?

    The blog I need help with is ateaoscem.com.

  2. zandyring
    Staff

    To change the post area do this:

    .hentry {
    background: none repeat scroll 0 0 white;
}

    This just changes the area of the post - you can add padding so that the titles are right up against the edges of the white, but that adds some additional width to the entire content area. If you add this to .hentry, you get it back about right:

    margin: 0 0 3em 12%;
    padding: 15px;

    Alternatively, you can turn the entire content area white:

    #content {
    background: none repeat scroll 0 0 white;
}

    I think this is the better option (because it's a cleaner solution) but you may have specific plans for the look of your blog.

    As far as the videos go, I'm not very familiar with the sliders and their design, but it looks like what you will need to target is .featured-posts-outer.
    Perhaps try something like:
    .featured-posts-outer {background: none;}

    Good luck!

  3. ateaoscemxs
    Member

    Well...

    My plan is that the whole area of the blog to be white, except the background image.
    Understand me?
    Like my principal blog: http://ateaoscem.com

    With your first code, the post area is white, but the rest of the are is gray.
    You see?
    In which case, the rest of the area could keep the background image, and de right sidebar, white too.

    But, i think is easiest like in http://ateaoscem.com, isn´t?

    Thank you very much for the help.

    I hope to make the change today!

  4. zandyring
    Staff

    Ok, so to change the entire page except your background image to white, do this:

    #page {
    background: none repeat scroll 0 0 white;
}

  5. ateaoscemxs
    Member

    Yes!!
    That's it!

    And about the the right side margins of the video which advise me?

    Maybe I can decrease the left margin, and center the hole area of the videos (arrows, and legend included) ?

  6. zandyring
    Staff

    Yes, if you change that margin to 0, your slide show will stretch across the entire content area:

    .featured-posts-wrapper{
margin: -0.857143em 0 4.71429em;}

  7. ateaoscemxs
    Member

    Yes!!
    That's it, again!
    Tank you!

    Can I put one more question?

    What code i have to change, to change the color of the pages?
    "Home", "About", etc

    Like i have in the main page of my principal blog:
    http://ateaoscem.com
    Here they are gray!

    With this, i can make the change! :)
    Thank you a lot!

  8. zandyring
    Staff

    You need to add this to your CSS:

    #page {
    background: none repeat scroll 0 0 white;
}

  9. ateaoscemxs
    Member

    Sorry, it is not that.

    In this blog
    http://ateaos100.wordpress.com

    I want to put the background color of the several pages name in grey,
    like i have in
    http://ateaoscem.com

    in "Início", "Sobre nós", "Contactos"......"Tratamento capilar da Xs"

    I do not know how you call it, sorry.

    The code
    #page {
    background: none repeat scroll 0 0 white;
    }
    changes the all page.

  10. zandyring
    Staff

    Oooh I'm sorry. I didn't understand that you were talking about the page names - that's my mistake.

    I think if you do this, you should get what you want:

    #menu li:hover >a, #menu ul ul:hover>a {color: #0099FF;}

    I'm not 100% positive, so test it out and let us know!

  11. ateaoscemxs
    Member

    Is not working!
    I did
    #menu li:hover >a, #menu ul ul:hover>a {color: #e12344;}

    I do not see any change!

  12. zandyring
    Staff

    Ok, try this:

    .main-navigation li a:hover {background: #e6e6e6;}

  13. ateaoscemxs
    Member

    Sorry, but no!

    I did

    .main-navigation li a:hover {background: #f9155e;}

    but do not see any change!

  14. zandyring
    Staff

    Try adding "ul" before the "li" in the code.

    I'm not able to look at the CSS on your test site, so I'm really taking shots in the dark - I'm sorry!

  15. ateaoscemxs
    Member

    Sorry, i'm wrong!
    With this:
    .main-navigation ul li a:hover {background: #f9155e;}
    The colour changes, but only when step whith the mouse.
    Not permanently like in http://ateaoscem.com.

  16. ateaoscemxs
    Member

    I was wrong again! :(
    Not call the last comment.

    With this:
    .main-navigation li a:hover {background: #f9155e;}
    The colour changes, but only when step whith the mouse.
    Not permanently like in http://ateaoscem.com.

  17. zandyring
    Staff

    Maybe try:

    li .current_page_item {background: #f9155e;}

  18. ateaoscemxs
    Member

    If i did "li .current_page_item {background: #f9155e;}"
    nothing appens.

    If i did ".current_page_item {background: #f9155e;}" it works but only to the current page.

    Lack only the portion of code for other pages!

  19. zandyring
    Staff

    Ok, I think I understand now. You'd like your entire menu area to be gray, right?
    Maybe try:

    #menu {
margin-left: auto;
margin-right: auto;
display: block;
background: #F9155E;
width: 100%;
}

    See if that works at all for you.

    Your menu item is only as wide as the two blocks that make up the links to "home" and "about," so it'll be necessary to make the menu item appear as wide as the page.

  20. ateaoscemxs
    Member

    Still does not work.

    I create more two pages and did the code you provided.

    But like you can see

    http://ateaos100.wordpress.com

    the colour not changed!

    :(

    Sorry!

    In my Css Page i only have this:

    #page {
    background:none repeat scroll 0 0 white;
    }

    .featured-posts-wrapper {
    margin:-.857143em 0 4.71429em;
    }

    .entry-title,.entry-title a {
    text-align:center;
    }

    .site-title {
    text-align:center;
    }

    #menu {
    margin-left:auto;
    margin-right:auto;
    display:block;
    background:#F9155E;
    width:100%;
    }

  21. ateaoscemxs
    Member

    After doing an analysis to CSS code of the theme code Sundance, i realized that the code to change the menu pages, is

    .main-navigation ..... {
    ........
    }

    The code to change the background colour of the menu pages is

    .main-navigation li {
    background: #4ba6fb;
    }

    To change the colour of the letter, is

    .main-navigation li a {
    color:#fff;
    }

    So i put both, like this:

    .main-navigation li a {
    background: #4ba6fb;
    color:#fff;
    }

    And it woks.

  22. zandyring
    Staff

    I'm really glad you got this resolved! I'm sorry I left you hanging for awhile. Your site is going to look great!

  23. ateaoscemxs
    Member

    Thank you!

    But I still want to make other changes that do not realize how.

    Still the menu pages, i want to put it like in Fresh & Clean Theme.
    Like i have now in my test blog:
    http://ateaos100.wordpress.com

    I want that the menu has a shadow between the two shores of the blog.

    When i tryed to do it, if i do

    .main-navigation li a {
    color:#000000;
    background: #4ba6fb;
    }

    only the space occupied by the letters is colored.

    And i want a whole rectangle in entire area.

    How can i do it?

  24. zandyring
    Staff

    First, set your masthead hgroup to this:

    #masthead hgroup {
    background: none repeat scroll 0 0 white;
    margin: 0 0 1.14286em;
    border-bottom: 1px solid grey;
    overflow: hidden;
}

    Then set your headline to this:

    .wf-active .site-title {
    background: none repeat scroll 0 0 white;
    }

    Then set the regular masthead to this:

    `#masthead {
    background: none repeat scroll center bottom #4BA6FB;
    margin: 0;
    border-bottom: 1px solid grey;
    };

    And see how that looks for you.

  25. mariellenitoslawska
    Member

    Hello,

    I've designed a WP site here: http://breakingtheframedotcom.wordpress.com/
    I need to decrease the space between the menu and the start of each page content (from the bottom of the menu to the top of each image on each page). I can't seem to figure out what CSS code to add to CSS Stylesheet Editor.

    Any help would be much appreciated!
    Thanks!

  26. mariellenitoslawska
    Member

    Sorry, url is: http://breakingtheframe.com/

  27. zandyring
    Staff

    Mariellen, I recommend starting a new thread for this - I'll be glad to help!

  28. ateaoscemxs
    Member

    Is not exactly like i want, but i will manipulating the code, and then i say something.

    Another question, please!

    In my principal blog:
    http://ateaoscem.com
    If you click in my calendar, in July, appears the phrase:
    "Arquivos mensais: Julho 2012"
    (monthly archives: july 2012)
    it appears in dark green

    or if you click in one page, like "Contactos", the title of the pages appears in dark green, too.

    How can i change that colour?

  29. zandyring
    Staff

    You want to target the h1 tag, so do this in your CSS page:

    h1 {color: #0099ff;}

    That should change the color for you.

  30. ateaoscemxs
    Member

    uppss!
    Wordpress does notify me by e-mail!
    Just saw now your answer!

    Yes!
    That's it!
    Thank you! ;)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags