Small change in Sundance

ateaoscemxs · Member · Aug 24, 2012 at 11:22 am
Copy link

Add topic to favorites
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: (visible only to logged in users)
zandyring · Staff · Aug 24, 2012 at 12:10 pm
Copy link
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!
ateaoscemxs · Member · Aug 24, 2012 at 12:33 pm
Copy link
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!
zandyring · Staff · Aug 24, 2012 at 2:26 pm
Copy link
Ok, so to change the entire page except your background image to white, do this:
```
#page {
    background: none repeat scroll 0 0 white;
}
```
ateaoscemxs · Member · Aug 24, 2012 at 2:48 pm
Copy link
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) ?
zandyring · Staff · Aug 24, 2012 at 3:17 pm
Copy link
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;}
```
ateaoscemxs · Member · Aug 24, 2012 at 3:28 pm
Copy link
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!
zandyring · Staff · Aug 24, 2012 at 3:33 pm
Copy link
You need to add this to your CSS:
```
#page {
    background: none repeat scroll 0 0 white;
}
```
ateaoscemxs · Member · Aug 24, 2012 at 3:48 pm
Copy link
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.
zandyring · Staff · Aug 24, 2012 at 4:08 pm
Copy link
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!
ateaoscemxs · Member · Aug 24, 2012 at 4:47 pm
Copy link
Is not working!
I did
#menu li:hover >a, #menu ul ul:hover>a {color: #e12344;}

I do not see any change!
zandyring · Staff · Aug 24, 2012 at 6:19 pm
Copy link
Ok, try this:

.main-navigation li a:hover {background: #e6e6e6;}
ateaoscemxs · Member · Aug 24, 2012 at 7:27 pm
Copy link
Sorry, but no!

I did

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

but do not see any change!
zandyring · Staff · Aug 24, 2012 at 7:40 pm
Copy link
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!
ateaoscemxs · Member · Aug 24, 2012 at 7:57 pm
Copy link
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.
ateaoscemxs · Member · Aug 24, 2012 at 7:58 pm
Copy link
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.
zandyring · Staff · Aug 24, 2012 at 8:18 pm
Copy link
Maybe try:

li .current_page_item {background: #f9155e;}
ateaoscemxs · Member · Aug 25, 2012 at 12:05 am
Copy link
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!
zandyring · Staff · Aug 25, 2012 at 1:08 am
Copy link
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.
ateaoscemxs · Member · Aug 25, 2012 at 10:10 am
Copy link
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%;
}

No items found.