Small change in Sundance

  • Author
    Posts
  • #988613

    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.

    #988716

    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!

    #988724

    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!

    #988745

    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;
    }
    #988755

    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) ?

    #988772

    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;}
    #988773

    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!

    #988777

    zandyring
    Staff

    You need to add this to your CSS:

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

    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.

    #988788

    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!

    #988790

    ateaoscemxs
    Member

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

    I do not see any change!

    #988848

    zandyring
    Staff

    Ok, try this:

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

    #988880

    ateaoscemxs
    Member

    Sorry, but no!

    I did

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

    but do not see any change!

    #988883

    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!

    #988889

    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.

    #988890

    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.

    #988891

    zandyring
    Staff

    Maybe try:

    li .current_page_item {background: #f9155e;}

    #988912

    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!

    #988914

    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.

    #988935

    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%;
    }

The topic ‘Small change in Sundance’ is closed to new replies.