Sela Theme – widget sidebar size and menu color

  • Unknown's avatar
    odraregi · Member ·

    Hi,
    i have 2 questions:
    1. how can i do to change the sidebar/widget box area? because i need to enlarge.

    2. Before to change my website backgroud in white color, i need to understad if it possible change the menu color (actual it blue) to white with 2 black lines, about same this: https://healthylivingdemo.wordpress.com

    My website is: gerardopandolfi.com
    Host: wordpress.com

    Thanks a lot and sorry for my english.

    The blog I need help with is: (visible only to logged in users)

  • staff-jeanpierreac · Staff ·

    Hi, Gerardo!

    1. how can i do to change the sidebar/widget box area? because i need to enlarge.

    Your current values for your secondary area (widgets columns) are 250px in browser windows bigger than 1180px and about 21% in windows between 850px and 1180px. There are more configurations in narrower screens but in this case widgets are after the content, at the bottom.

    You can enlarge it by changing width attribute. Take into account if you set values bigger than window width when added to .primary (or content area), that will cause to put first content and behind it your sidebar. That means you can set your width value up to 31% in screens from 850px to 1150px but not more unless you change your .primary width to make narrower your content area and up to 300px for browsers bigger than 1180px.

    So, you can use this css code (and change width values to fit with what you want).

    @media screen and (min-width: 850px) {
.sidebar-widget-area {
    width: 30%;
}
}

@media screen and (min-width: 1180px) {
.sidebar-widget-area {
    width: 300px;
}
}

    Just in case you need even more space, you should narrower your main content area (.primary div). Your current values are 765px in browsers bigger than 1180px width and a little bit less than 69% for 850px to 1180px. So, you can modify those parameters, for instance…

    @media screen and (min-width: 1180px) {
#primary.content-area {
    width: 600px;
}
}
@media screen and (min-width: 850px) {
#primary.content-area {
    width: 55%;
}
}

    Consequently, you can modify all these 4 values to compose your wanted layout

    2. Before to change my website backgroud in white color, i need to understad if it possible change the menu color (actual it blue) to white with 2 black lines,

    This is easier :)

    .main-navigation {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background-color: rgb(255,255,255);
}

    But you would also need to change your menu text color to black –or something darker- , isn’t it?

    .main-navigation ul a {
    color: black;
}

    I hope this helps you.

  • Unknown's avatar
    odraregi · Member ·

    wow working fine!
    i have another 2 question:
    1. is it possible change the widgets title color?
    2. i dont know what touch, but the footer area (i have 3 widget) change color. Before your reply i try to change the CSS myself, find to internet and copy to try… but i think it wrong something.
    This is all my css code use for now: 

    .widget_top-posts li, .widget_recent_comments td {
	text-align: justify;
}

.widgets-list-layout .widgets-list-layout-blavatar {
	max-width: 80px;
}

.widget {
	background-color: #ecf0f1;
	clear: both;
	margin: 0 0 2.2em;
	padding: 10px;
}

#secondary {
	background-color: #ecf0f1;
}

.widget-title {
	color: #e74c3c;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 2.6em;
	text-transform: uppercase;
}

.entry-content a {
	color: #cc0000;
}
.main-navigation {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background-color: rgb(255,255,255);
}
.main-navigation ul a {
    color: black;
}
@media screen and (min-width: 1180px) {
#primary.content-area {
    width: 600px;
}
}
@media screen and (min-width: 850px) {
#primary.content-area {
    width: 70%;
}
}
@media screen and (min-width: 850px) {
.sidebar-widget-area {
    width: 30%;
}
}

@media screen and (min-width: 1180px) {
.sidebar-widget-area {
    width: 300px;
}
}

    i think wrong something here: 

    .widget {
	background-color: #ecf0f1;
	clear: both;
	margin: 0 0 2.2em;
	padding: 10px;
}

#secondary {
	background-color: #ecf0f1;
}

.widget-title {
	color: #e74c3c;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 2.6em;
	text-transform: uppercase;
}

    because i try to change all sidebar color to have this final effect.

    thanks

  • Unknown's avatar
    odraregi · Member ·

    another question:
    when i move the mouse on the menu title (for ex. Guide, Mobile , etc), the text became white and it not possible ready because the backgroud it white.
    is it possible change the color so when noboby touch it black, and when will move the mouse on the title words to select change in gray…

    Thanks

  • staff-jeanpierreac · Staff ·

    Hi!

    1. is it possible change the widgets title color?

    I think you mean this (but, changing this horrible red color :)

    .front-widget-area .widget-title, .sidebar-widget-area .widget-title {
    color: rgb(255, 0, 0);
}

    2. i dont know what touch, but the footer area (i have 3 widget) change color. Before your reply i try to change the CSS myself, find to internet and copy to try… but i think it wrong something.

    Ok. If I understand, you would like to background-color of tertiary widget area where your three widgets are. If so, you could do it with a little bit of CSS magic. In this code you would change it to white (Currently it is 250,250,250, so slightly grey):

    .footer-widget-area {
    background-color: rgb(255, 255, 255);
}

    another question:
    when i move the mouse on the menu title (for ex. Guide, Mobile , etc), the text became white and it not possible ready because the backgroud it white.
    is it possible change the color so when noboby touch it black, and when will move the mouse on the title words to select change in gray…

    This gray? (You can change it to adapt to your needs).

    .main-navigation a:hover, .main-navigation ul > :hover > a, .main-navigation ul > .focus > a {
    color: rgb(205, 205, 205);
}

    Thanks

    You are welcome ! :)

  • Unknown's avatar
    odraregi · Member ·

    perfect all working fine!
    just last question:
    do u think it possible have the same line used for the menu (1px black) around all sidebar? so to have a “frame” of the gray color.

  • staff-jeanpierreac · Staff ·

    Hi!

    Let’s try:

    #secondary {
    border: 1px solid black;
    }

    :)

  • Unknown's avatar
    odraregi · Member ·

    hi again,
    thanks for all!

    Last question. I try the mobile, but the text inside the menu it white and it not possible see what it write.

    Do u have idea ho can i do to fix the mobile view?

    Thanks a lot

  • staff-jeanpierreac · Staff ·

    Hi again.

    You can use this piece of code for links in the second level of unordered lists (This is what your menu options are)

    .main-navigation ul ul a {
    color: red;
    padding: 0.5em 0px;
}

    I hope this helps you!

  • Unknown's avatar
    odraregi · Member ·

    yes, thank you very much for all!

  • staff-jeanpierreac · Staff ·

    Nice!!!!
    :)
    Enjoy blogging!

  • The topic ‘Sela Theme – widget sidebar size and menu color’ is closed to new replies.