Archived

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

  • 0

Any tips about block with rounded corners...

Question

Posted · Report post

Hi,

 

Has anybody good CSS tips how to achieve this layout which I have to rebuild: oudisnieuw[dot]net.

 

Kind regards,

 

Willem

Share this post


Link to post
Share on other sites

8 answers to this question

Posted · Report post

Hi,

 

You should really use IDs for your custom CSS, as they will most likely prove to be a pain later. All sections in PageLines Framework are given a unique class for that section, this class can be found in the <section ID="" class="Here"

 

For example, if you inspect the Branding section HTML, via Firebug or your browsers built-in tools, inside the <section> tag you will see the following:

 

<section id="branding" class="container section-branding fix">

 

That is the class you should be using to target that particular section. All sections have a similar class name.

 

To use this class in your CSS, lets imagine you wish to increase the padding for the Branding section.

 

#site .section-branding .content-pad { padding: 60px; }

 

#site = This is an override to make sure your custom CSS is loaded.

.section-branding = The Sections class name

.content-pad = This div controls the padding for the section, which is by default 15px.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi, it was neccesarry to really do some more study on CSS (absolute vs relative, block vs inline, float etc), but then I got it working. 

 

What I wonder is, I never see something like 'section-sectionname', when i look up the html I would write it like 'section#quickslider'...

How come 'section-sectionname' is also valid css?

 

Kind regards,

 

Willem

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Danny, I had overlooked that!

Your explenation helped me.

 

Kind regards,

 

Willem

Share this post


Link to post
Share on other sites

Posted · Report post

No problem. ;)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi, thanks Martin. 

 

I took my PageLines skills to the next level > I have now a Child Theme to create a layout like oudisnieuw[dot]net.

I'm now able to use the quickslider in my header part of the template.

 

So what's there now are two sections, check this HTML... want I trie to achieve (but I'm not getting it to work) is that both sections are next to each other (tried block displays, relative positions, floats...)

 

<header id="header" class="container-group">
				<div class="outline">
					

<!-- Branding | Section Template -->
<section id="branding" class="container no_clone section-branding fix"><div class="texture"><div class="content"><div class="content-pad"><div class="branding_wrap fix"><a class="plbrand mainlogo-link" href="http://oudisnieuw.net.websrv.makeweb.nl" title="Oud is Nieuw"><img class="mainlogo-img" src="http://oudisnieuw.net.websrv.makeweb.nl/wp-content/uploads/landelijk-wonen-oud-is-nieuw.jpg" alt="Oud is Nieuw" /></a><div class="icons" style="bottom: 12px; right: 1px;"></div></div>		
			<script type="text/javascript"> 
				jQuery('.icons a').hover(function(){ jQuery(this).fadeTo('fast', 1); },function(){ jQuery(this).fadeTo('fast', 0.5);});
			</script>
</div></div></div></section>

<!-- QuickSlider | Section Template -->
<section id="quickslider" class="container no_clone section-quickslider fix"><div class="texture"><div class="content"><div class="content-pad">	<div class="flexwrap animated fadeIn wrap-control-nav">
		<div class="fslider">
		<div class="flexslider pl-clone">
		  <ul class="slides">
			
			<li><img src="http://oudisnieuw.net.websrv.makeweb.nl/wp-content/themes/pagelines-template-theme/sections/quickslider/images/image3.jpg" /></li><li><img src="http://oudisnieuw.net.websrv.makeweb.nl/wp-content/themes/pagelines-template-theme/sections/quickslider/images/image1.jpg" /></li><li><img src="http://oudisnieuw.net.websrv.makeweb.nl/wp-content/themes/pagelines-template-theme/sections/quickslider/images/image2.jpg" /></li>		  </ul>
		</div>
		</div>
		<div class="fs-nav-container control-nav"></div>
	</div>
	
		</div></div></div></section>				</div>
			</header>

 

Can anybody help me how to do this?

 

Kind regards Willem

Share this post


Link to post
Share on other sites

Posted · Report post

In order to do this, you will need to find the correct class, then use the following:

 

 

 

.section-sectionname { 
float: left;
width: 48%;
}

 

Do the same for both sections, additional styling may be required but this should do the trick.

Share this post


Link to post
Share on other sites