Changing layout and font color in theme simpla

  • unmaredistorie · Member ·

    Hi, i’m totally new at this and I need some help customizing this blog.
    These are my questions:
    1) Which is the CSS code to change color font and size of the blog title, and the title and date of a post?
    2) Which is the CSS code to change the position of the upper menu?
    3) Which is the CSS code to change the dimesion of the header?

    Thank you in advance for your kindness!
    If you need more information, i’ll be glad to help you helping me! :D

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

  • unmaredistorie · Member ·

    Anyone?
    Please, if you can answer i’m really in a hurry…

  • unmaredistorie · Member ·

    Anyone?
    Please, if you can answer i’m really in a hurry…

  • thesacredpath · Member ·

    1. I don’t see a site title. I see you have the title in the header image.

    Post title and the second bit is the date

    .entrytitle h2 a {
color: #B4C24B;
font-size: 2.2em;
}

.entrytitle h3 {
color: #6F6F6F;
font-size: 1.8em;
}

    2. The code is going to depend on where you want to move it.

    3. Changing the width will require changing a bunch of other things. The height though can be changed easily by just changing the valued below. Once you change either dimension on a header image, you cannot use the header uploader at appearance > header. You have to put the code directly into the CSS (the background declaration below).

    #header-image {
background: url("URL OF IMAGE") no-repeat scroll 0 0 transparent;
height: 120px
width: 750px;
}

    You will need to create the header image in the size you want, upload it to your media library, get the URL of that image and replace URL OF IMAGE between the quote marks in the background declaration.

  • unmaredistorie · Member ·

    Thank you for the reply.

    About question 2 (the code to move the menu), i’d like to move it under the header.

    And I have a further question:

    Which is the code to change font color and size of the menu (by the font color i mean also the rollover color)? Can i change the color of menù background when i roll over it? What would the code be for that?

    Thank you so so much.

  • thesacredpath · Member ·

    Moving the menu below the header (this will need adjusted after you get your new header image in).

    #wrap {
position: relative;
}

#header-image {
margin: 40px 0 40px 10px;
}

#header {
position: absolute;
top: 100px;
}

    Menu item font color and size (non-hover)

    .nav a {
color: #AAAAAA;
font-size: 120%;
}

    Menu item font color and background color (rollover)

    #nav li:hover > a, #nav ul ul:hover > a {
background: #999999;
color: #FFFFFF;
}
  • unmaredistorie · Member ·

    Wow, thanks. I’m solving a problem one after another.

    I’m doing some experiments right now, so my questions come one after another. :D

    1) As you can see on my blog, the header has a black line over it. Is that because the image i uploaded isn’t of the proper size or is that a decoration? In the case it’s a decoration, is it possible to eliminate it? Which would the code be?

    2) If i eliminate the header, the code to move the menu under it will position the menu in that area even if the header is no more there? In negative case, which is the code to move it in that area without header?

    3) Which should be the dimensions (in pixels) of the background image to cover the whole area of the blog?

    Thank you for your huge and precious help, and excuse me but i’m totally new at this.

  • thesacredpath · Member ·

    1. use this

    #header-image {
border-top: none;
}

    2. If you remove the header image, everything will collapse upward to fill the space where the header was. To have all that stuff down where it is now will require some adjustments. This would be a starting place to keep the content down below the logo in your background image.

    #header {
margin-top: 150px;
}

    3. That isn’t a fixed thing because you cannot control how wide a person’s browser window is set, and the resolution/size of their monitor. You can generally minimize the hard edge between the white of the browser window and a background image by choosing a complementary color and assigning that to body in the CSS like the below.

    body.custom-background {
background-color: #CCCCCC;
}

    This comes close to matching the right edge of your image, but not the left, although the grey on the left doesn’t look that bad.

  • unmaredistorie · Member ·

    Hi, everything is going ok.
    I just need some more help and then i think the blog will be ready.

    1) Which is the code to move orizontally the sidebar?
    2) Which is the code to change font color and size in sidebars and in posts?
    3) Is there a code to include somewhere youtube, facebook and twitter link icons (for example above or instead of “search” or better include them in the sidebar)?
    4) I’d like the upper menù fixed when I scroll down. Is there a code for that?

    Thank you very much again. Hope this topic can help someone else too!

  • thesacredpath · Member ·

    1. Use a margin top declaration in #sidebar (the 100px is just a placeholder)

    #sidebar {
margin-top: 100px;
}

    2. The two main font color declarations are in body and “a”. Note that the “body” font color also controls the sidebar titles. If you want those to remain dark as they are, you can use the third bit of code below. Font sizes for content and sidebar are the last two.

    body {
color: #555555;
}

a {
color: #557799;
}

#sidebar h2 {
color: #555555;
}

#content {
font-size: 1.2em;
}

#sidebar {
font-size: 1.1em;
}

    3. You will have to use a text widget and code it up as you desire

    http://en.support.wordpress.com/widgets/text-widget/
    http://en.support.wordpress.com/links/text-widget-links/

    4. Change the #header stuff I had previously given you to the following.

    #header {
position: fixed;
top: 165px;
}
  • unmaredistorie · Member ·

    Oh, is there also a code to hide the “search” bar?

    Thank you.

  • unmaredistorie · Member ·

    I’m sorry for the previous question: i didn’t see that “search bar” was a removable widget.

    Which is the code to move orizontally the posts area? I’d like to move it to the right together with the sidebar to have a better and simmetric look in the page.

    Thank you so much and excuse me again for the previuos question: i’ll read better before posting.

  • thesacredpath · Member ·

    Not a problem with the questions. Add the following and you can adjust the 90px value as desired.

    #wrap {
padding-left: 90px;
}
  • unmaredistorie · Member ·

    Got another problem.
    Is it possible to move the posts area separetly from the sidebar?
    I mean, i like the post area where it is now (i used the code you gave me in the previuos post), but i’d like the sidebar a little more on the right.

    Thank you

  • thesacredpath · Member ·

    This gets a little complex since when you increase the width of the wrapper so you can move the sidebar further to the right, the content ends up moving further to the left. You will have to readjust the left padding on the wrapper probably to get the alignment you want after changing the wrap width. (76em is what it is now.)

    #wrap {
width: 76em;
}
  • unmaredistorie · Member ·

    Thank, I think i resolved.

    Further question: how can I make the text of the post disappear while scrolling once the text reached the upper menu or the header image? Is this possible?

    Another question. I’ll need a lot of voices in the upper menu: the voices will occupy a second line or will go on the same line? Is it possible to make them stay on the same line?

    Thank you.

  • unmaredistorie · Member ·

    Anyone?
    Do you need further explanations?
    Maybe i didn’t explain well… If u need more explanations, I’m here.

  • thesacredpath · Member ·

    how can I make the text of the post disappear while scrolling once the text reached the upper menu or the header image? Is this possible?

    Not without putting a solid background color, or an image of some sort up there that the post stuff can disappear behind, and that would hide your title and such. This is the problem with putting the title and such in the body background; there is nothing behind it, it is the farthest thing back.

    I’ll need a lot of voices in the upper menu: the voices will occupy a second line or will go on the same line? Is it possible to make them stay on the same line?

    I’m not sure what you are talking about on “voices” but the menu has a physical, and practical limit on the number of menu items. Too many menu items and it becomes difficult to navigate and people won’t use it. Too many menu items and (if on one line) it becomes so wide that people would have to scroll horizontally to be able to see the menu items.

  • unmaredistorie · Member ·

    Ok, got it.

    1) Let’s suppose i’ll cancel the title and logo from the backgroud and put them in a header image.
    How big should the header image be to achive in the purpose to make the text disappear behind it? What’s the code to do this (i think i should also use a code to modify the dimensions of the header image, like the one you gave me before, is this right)?

    2) The menu you see it’s the definitive one. I’d like to move it on the left leaving the posts area where it is now. Is this possible?

    Thank you bery much for your help.

  • thesacredpath · Member ·

    1. It will need to be about 750px wide x 250px tall. That extends the full width of the wrap/header area and will catch the area behind the navigation as well.

    2. What do you mean, move it on the left? Vertical over the photos in the background image? That will make the navigation labels difficult to read.

1 2
  • The topic ‘Changing layout and font color in theme simpla’ is closed to new replies.