Help with (probably pretty basic) CSS

• 

  wearelatl · Member · Sep 1, 2011 at 10:59 am

  • Copy link
  • Add topic to favorites

  Hey,

  I want to customise my blog more (www.lambandthelion.com), I’ve had a look at the CSS tutorials but it’s still quite baffling. I am yet to buy the custom CSS upgrade, because I want to make sure it is possible to do what I want with the blog first.

  The theme I am using is coraline, and what I want to do is:

  Have the title (Lamb and the Lion) under the header
  make the widget and post backgrounds white.

  and probably some other things to but am yet to think of any more.

  Am I right in presuming there is already CSS in the coraline theme stating that the title is under the header? If I were to just include my custom CSS with coralines would the two codes ‘clash’ with each other? or would my custom CSS trump the themes?

  Thanks!

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

• 

  thesacredpath · Member · Sep 1, 2011 at 11:31 am

  • Copy link

  Ad this to your CSS and see what you think.

  #container {
  background-color: #FFFFFF;
  }

• 

  wearelatl · Member · Sep 1, 2011 at 12:18 pm

  • Copy link

  thats fantastic, thanks! just paid for it now :D

  what about getting the header (lamb/lion logo) above the menu and blog title?

• 

  wearelatl · Member · Sep 1, 2011 at 12:25 pm

  • Copy link

  Also do you if it is possible to have a splash screen in the wordpress.com version? or do you need to have hosted the blog on your own server?

• 

  designsimply · Member · Sep 1, 2011 at 2:37 pm

  • Copy link

  You would need to the self-hosted WordPress.org version in order to create a splash screen. But… I personally much prefer sites without them if it’s at all possible to leave it out. :)

• 

  wearelatl · Member · Sep 1, 2011 at 3:08 pm

  • Copy link

  thank you so much for the help! totally new to this haha, yeah i think i’ll leave the splash screen!

• 

  designsimply · Member · Sep 1, 2011 at 3:15 pm

  • Copy link

  Cheers. :)

• 

  wearelatl · Member · Sep 2, 2011 at 3:58 pm

  • Copy link

  does anyone know how we would move the header? (so going vertically down the page it goes header (the image of the lamb and lion) then the title (Lamb and the Lion) then the menu?

• 

  designsimply · Member · Sep 2, 2011 at 4:54 pm

  • Copy link

  Here is a start. Adjust the spacing as necessary:

  #header {
       position: relative;
       height: 220px;
  }
  
  #branding a img {
       position: absolute;
       top: 0px;
  }
  
  #masthead {
       position: absolute;
       top: 114px;
       width: 100%
  }
  
  #access {
       position: absolute;
       top: 190px;
  }

• 

  wearelatl · Member · Sep 2, 2011 at 5:26 pm

  • Copy link

  that has worked amazingly, thank you! one final final thing, how do I move the line thats between the logo and the title back down to just above the menu?

  you guys have been amazing, thank you :)

• 

  designsimply · Member · Sep 2, 2011 at 5:51 pm

  • Copy link

  Use this to adjust the borders surrounding the header image:

  #branding img {
  	border: 1px solid #000;
  	border-width: 3px 0px 0px 0px;
  }

  For border-width, you set them clockwise: top right bottom left.

  Use this to adjust the border above the menu:

  #access {
      border-top: 1px solid #CCCCCC;
  }

  Adjust the height and color to your liking.

• 

  wearelatl · Member · Sep 2, 2011 at 6:01 pm

  • Copy link

  done, thats absolutely fantastic! and I actually vaguely understand what that all means now :D

  thank you so much :)

• 

  designsimply · Member · Sep 2, 2011 at 6:13 pm

  • Copy link

  That’s awesome! Your last comment makes me want to work on more tutorials and resources too.