Archived

This topic is now archived and is closed to further replies.

  • 0

list item styling inside hero section


Question

Posted · Report post

Hey mateys,

 

i tried the hero section today and with a little help from this forum i could style the standards like h1, p and such. when inserting a <ul> with a specific class and a <li> with another class, i can't seem to style the list item via the customize plugin.

 

this ist the html: 

<!-- Hero | Section Template -->
<section id="hero" class="container no_clone section-hero fix"><div class="texture"><div class="content"><div class="content-pad">
	   	<div class="pl-hero-wrap row">

	   	<div class="pl-hero span8">				<h1 class="m-bottom"></h1><h2>Mit der VSV Baden-Württemberg ...</h2><p>... sind sie perfekt ausgestattet:
<ul class:"vorteile">
<li class:"listitem1">vom Ausbildungsbeginn an das Standardwerk zur Hand</li>
<li class:"listitem2">Ergänzungslieferungen bequem im Abonnement</li>
<li>versandkostenfreie Lieferung von Grundwerk und Ergänzungen</li>
<li>schneller Service z.B. für das Nachbestellen fehlender Seiten</li>
</ul></p><a  class="btn btn-important btn-large" href="...">jetzt bestellen</a> 			</div>

	   	<div class="pl-hero-image span4">				<div class="hero_image"><img class="pl-imageframe" src="..." /></div>			</div>

		</div>

		</div></div></div></section>

 

 

and this ist the css from the customize plugin:

 

/*CUSTOMIZING HERO UNIT*/
.pl-hero-wrap .pl-hero h2 { color: #cc0000; font-size: 37px; font-weight:bold; }
.pl-hero-wrap .pl-hero p { color: #CC0000; font-size: 16px; font-weight:bold; }
.pl-hero-wrap .pl-hero ul.vorteile li.listitem1 li { color: #CC0000; font-size: 16px !important; font-weight:bold !important; }

I'm confused how to select the list item which is not in a div but under a lot of divs and another ul. Any tips guys? (i deleted the respecting real url) I'd like to style it manually.

 

cheers,

mo

 

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

Try adding the customized CSS to Dashboard > PageLines > Site Options > Custom Code > CSS Rules.  Sometimes this works where the PL customize plugin does not because of the precedence of the calls made for code in page load.

Share this post


Link to post
Share on other sites

Posted · Report post

so the syntax/code seems correct to you? adding this to custom css doesnt do anything either. i added this:

 

.pl-hero-wrap .pl-hero ul.vorteile li.listitem1 li { color: #CC0000; font-size: 16px !important; font-weight:bold !important; }

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

If you wish to add a unordered list to the Hero section, then you will need to give the <ul> a custom class and then add custom CSS to style your list.

 

However, an easier method would be to simply use Font Aweome, which will do the hard work for you. For example - http://d.pr/i/S2ER

 

All I used was the code given on our Font Awesome documentation - http://support.pagelines.me/docs/miscellaneous/font-awesome/

 

Scroll to the bottom of the page and find the section called Lists, I used the multi-colored code.

Share this post


Link to post
Share on other sites