Need help with CSS Customization

• 

  vlogazul · Member · Sep 13, 2013 at 3:14 am

  • Copy link
  • Add topic to favorites

  Hello!
  I was wondering if somebody can help me create a CSS snippet to make the recent posts “Últimas Noticias” widget text be aligned from the beggining of each text line.
  As you can see every post on that widget starts like this: ( • Text ) but if the post title is long and uses two or three lines, the second line and third line starts under the bullet point, and I want it to start aligned with the text in the first line. Hope somebody can help me create the snippet since am not familiar with CSS. Thanks

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

• 

  siobhyb · Member · Sep 13, 2013 at 7:56 am

  • Copy link

  Hey, in the original snippet I gave you:

  #secondary .widget > ul {
  list-style: disc inside;
  }

  Replace this line:

  list-style: disc inside;

  With these two lines:

  list-style: disc;
  margin-left: 2em;

  Let me know if this works as you want it to.

• 

  vlogazul · Member · Sep 13, 2013 at 8:25 am

  • Copy link

  Thank you for answering and you have been amazing to me. I tried it and that’s exactly the way I want it :)

  Just a little detail, can you make the text be almost next to the bullet point? For instance like this ( • Text ) just with a space on between? With the bullet point exactly where it is but moving the text a little to the left!

  Thank you very much, you rock!

• 

  siobhyb · Member · Sep 13, 2013 at 8:34 am

  • Copy link

  Try:

  #secondary .widget > ul > li {
  padding-left: 0;
  }

• 

  vlogazul · Member · Sep 13, 2013 at 8:49 am

  • Copy link

  It works perfect and just the way I wanted to! Thank you very much for all the help you are giving me and you do a wonderful job, I appreciate it :)

• 

  siobhyb · Member · Sep 13, 2013 at 8:52 am

  • Copy link

  Aw, you’re welcome and thanks very much. :)

• 

  vlogazul · Member · Sep 13, 2013 at 10:29 pm

  • Copy link

  Hello!
  Is there a snippet to make the recent posts “Últimas Noticias” widget have a gray border around, identical to the one that the twitter timeline on my blog has at the bottom where it says “Twittear a @vlogazul”?

• 

  siobhyb · Member · Sep 13, 2013 at 11:16 pm

  • Copy link

  Hey. Try the following:

  #recent-posts-2 {
  border: 1px solid #e8e8e8;
  margin-left: 7.042253521127% !important;
  padding: 20px 5px 0;
  }
  
  #recent-posts-2 ul {
  margin-bottom: 0;
  }

  There may be a little tweaks needed to the spacing, let me know how you get on with this.

• 

  vlogazul · Member · Sep 13, 2013 at 11:41 pm

  • Copy link

  Yes exactly like that, it just needs a little bit more tickness so that the border can stand out!

• 

  vlogazul · Member · Sep 14, 2013 at 2:45 am

  • Copy link

  I was playing around with that snippet and I already found the perfect size for the border. I changed the border 1px to 5px :) and that’s exactly how I wanted it. Now I just want to see if you can do the snippet for the same border style as the one you created for the Search “Buscar” widget and also for the twitter timeline widget so that all of those 3 widget borders match. Thanks and hope you can help me.

• 

  siobhyb · Member · Sep 16, 2013 at 10:09 am

  • Copy link

  For the search bar widget:

  #search-2 {
  border: 4px solid #e8e8e8;
  margin-left: 7.042253521127% !important;
  padding: 0 !important;
  }
  
  #search-2 input[type="text"] {
  border: none;
  }

  For the Twitter timeline widget:

  #twitter_timeline-2 {
  border: 4px solid #e8e8e8;
  margin-left: 7.042253521127% !Important;
  padding: 0;
  }

• 

  vlogazul · Member · Sep 16, 2013 at 10:39 am

  • Copy link

  Perfect!
  Now, how can you make the twitter timeline fit into that particular border completely? If you check on that widget the right side of the timeline perfectly fits with the edge but not the left hand side and the bottom. Is there a snippet for it? Thanks

• 

  vlogazul · Member · Sep 16, 2013 at 10:41 am

  • Copy link

  * the size of that timeline is 400 width x 400 height

• 

  siobhyb · Member · Sep 16, 2013 at 1:18 pm

  • Copy link

  Try changing the snippet for the timeline to the following:

  #twitter_timeline-2 {
  border: 4px solid #e8e8e8;
  margin-left: 7.042253521127% !Important;
  padding: 0px !Important;
  width: 255px;
  height: 396px;
  }

• 

  vlogazul · Member · Sep 17, 2013 at 4:18 am

  • Copy link

  Works perfectly!
  Is there a snippet to make my menu bar and my header image be adjacent to each other with no space and to put them all the way on top of the page? And also to make them have the same width as the entire blog page? Thanks

• 

  designsimply · Member · Sep 17, 2013 at 8:40 pm

  • Copy link

  @vlogazul, would you mind creating a new help request when you have new questions and also try to make the subject line more specific? It helps make support easier.

  You can start a new thread here: https://en.forums.wordpress.com/forum/css-customization/#postform

  Is there a snippet to make my menu bar and my header image be adjacent to each other with no space and to put them all the way on top of the page? And also to make them have the same width as the entire blog page?

  Here is an example to get you started:

  #masthead {
  	position: absolute;
  	top: 0;
  	width: 962px;
  	margin: 0;
  }
  #masthead .custom-header img {
  	width: 100%;
  	height: auto;
  }
  #access {
  	position: absolute;
  	top: 116px;
  }
  body {
  	padding-top: 132px;
  }

  Adjust the values for “top” and “padding-top” until you find the spacing that works best for you.

  Note that if you upload a different custom header in the future, you may also need to adjust the numbers in this custom CSS.