WordPress.com

1. antiquityadmin
   Member
   Oct 14, 2012, 6:40 PM

   I'm using the Oxygen Theme. I've added CSS in order to remove Recent Articles and More Articles underneath the slider on my home page, but I'd like to be able to add some text below the slider. I'm using a static Showcase Template page as my home page. Can I add a widget area below the slider? Is this possible with CSS and if so, what is the code?

   Thank you so much for your help!

   The blog I need help with is antiquitynow.org.

2. designsimply
   Staff
   Oct 16, 2012, 10:08 PM

   The simplest way to add plain text to that area would be to use the CSS content property. Here is an example you can start with:

   .home #content-wrap:after {
   	content: "Replace this with the tect you'd like to add."
   }

3. antiquityadmin
   Member
   Oct 17, 2012, 2:01 AM

   Thank you so much! It worked perfectly. Is there any way to add a headline above the text? In a heading font?

4. designsimply
   Staff
   Oct 25, 2012, 8:08 PM

   Is there any way to add a headline above the text? In a heading font?

   Sure. You could use :before instead of :after. You would also want to use a different selector depending on exactly what text you want to place the headline before. Here are a few examples to get you started.

   This will add large, bold text above the recent articles section:

   .home .section-title:before {
   	content: "Example Headline";
   	font-weight: bold;
   	font-size: 20px;
   }

   This will add a headline before the recent articles articles section styled in the same way the recent articles heading appears. I did this by copying the CSS used for ".section-title h1" by the theme. I found the CSS by right-clicking the recent titles heading and selecting the "Inspect Element" option.

   .home .section-title:before {
   	content: "Example Headline";
   	display: block;
   	background: #F3F3F3;
   	border-left: 10px solid #E9E9E9;
   	color: #999;
   	font-size: 1.3em;
   	line-height: 1.7em;
   	margin-bottom: 20px;
   	padding: .25em .6em .3em .6em;
   	text-transform: lowercase;
   	width: 94.5%;
   }

   You can try out these examples and adjust them until the heading looks good to you.

Topic Closed

This topic has been closed to new replies.