WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Apply css code allowing home page to have multi-faceted sections (24 posts)

  1. macohen85
    Member
    Posted 10 months ago #

    I want my home page to have multi sections without pulling content from other pages. An example of what i'm looking for would be something like this website: http://www.iacquire.com/. I want the featured page section displayed under the slider, along with unique content sections below with colored backgrounds. Any help would be greatly appreciated. Thank you!

  2. rdellconsulting
    Member
    Posted 10 months ago #

    Customizr allows you to switch off different parts. So you could switch off the Slider & Featured Posts feature altogether, and then write your own Twitter Bootstrap HTML for the remainder of the page. (Edit Page).

    You'd need 3 Div's with class="span4" to start the FP effect.

    If you don't know about Bootstrap, start here:
    http://getbootstrap.com/2.3.2/
    Important that you use 2.3.2 as customizr is built around 2.3.2, not the new Bootstrap 3.

  3. macohen85
    Member
    Posted 10 months ago #

    Okay... I downloaded Bootstrap and extracted the zip file to my desktop...just not sure what needs to take place afterwards.

  4. rdellconsulting
    Member
    Posted 10 months ago #

    You don't need to download bootstrap. It's already built into customizr. But the syntax is described on that link.

  5. macohen85
    Member
    Posted 10 months ago #

    Okay, gotcha. Please bare with me... This is all very new for me. I understand using the div class="span4"...But which page do I need to apply this code to? And If I wanted 3 unique divs, what would the syntax look like?

  6. ElectricFeet
    Member
    Posted 10 months ago #

    <!-- ******************NEW ROW OF CONTENT****************** -->
    <div class="row-fluid">
    
    	<div class="span4">
    		YOUR IMAGE OR TEXT HERE
    	</div>
    
    	<div class="span4">
    		YOUR IMAGE OR TEXT HERE
    	</div>
    
    	<div class="span4">
    		YOUR IMAGE OR TEXT HERE
    	</div>
    
    </div>
    <!-- ***************END OF ROW OF CONTENT****************** -->
  7. macohen85
    Member
    Posted 10 months ago #

    I need the divs to be displayed one below another vertically. @electricfeet, the code you provided has the divs side by side in a column format horizontally.

  8. ElectricFeet
    Member
    Posted 10 months ago #

    OK, span12 will go across the whole width.

    <!-- ******************NEW ROW OF CONTENT****************** -->
    <div class="row-fluid">
    
    	<div class="span12">
    
    				YOUR STUFF HERE
    	</div>
    
    </div>
    <!-- ***************END OF ROW OF CONTENT****************** -->

    Have a read here.

  9. ashu8000
    Member
    Posted 9 months ago #

    Hi,
    I want to have my home page with multi section with different colours. Need help.

    Thhanks.

  10. ashu8000
    Member
    Posted 9 months ago #

    Hi,
    I want to have my home page with multi section with different colours. Need help.

    Thhanks.

  11. ElectricFeet
    Member
    Posted 9 months ago #

    <!-- ******************NEW ROW OF CONTENT****************** -->
    <div class="row-fluid" style="background-color:sienna;color:pink">
    
    	<div class="span12">
    
    				YOUR STUFF HERE
    	</div>
    
    </div>
    <!-- ***************END OF ROW OF CONTENT****************** -->
    <!-- ******************NEW ROW OF CONTENT****************** -->
    <div class="row-fluid" style="background-color:black; color: white">
    
    	<div class="span12">
    
    				YOUR STUFF HERE
    	</div>
    
    </div>
    <!-- ***************END OF ROW OF CONTENT****************** -->

    will do what you want, but you need to play with margins (and the colours, obviously).

    Posting several times on the same topic (which you did a lot yesterday) doesn't get a speedier response. It simply irritates people who are trying to do their best on a voluntary basis.

  12. ashu8000
    Member
    Posted 9 months ago #

    Electricfeet,Thanks and sorry about that.I was very tensed and scared yesterday as I am new to this field.Please let me know where to put these codes.

  13. ElectricFeet
    Member
    Posted 9 months ago #

    No worries.

    You put this code in the pages/posts you edit. Your content goes where it says "YOUR STUFF HERE".

  14. ashu8000
    Member
    Posted 9 months ago #

    @ Electricfeet.I tries but couldn't do it.Please guide.Thanks

  15. ashu8000
    Member
    Posted 9 months ago #

    @ElectricFeet: Thanks, Done it but want to create like this

  16. ashu8000
    Member
    Posted 8 months ago #

    @rdellconsulting
    Would like to create same different coloured page on first page like you have on your website http://www.scmtc.co.uk with return to top icon .Is it possible to have those colour full width?

  17. rdellconsulting
    Member
    Posted 8 months ago #

    I set the background with an image, repeated throughout. My css is:

    body {
    margin-top: 0px;
    background: url('/wp-content/uploads/_media/scmtc-bgrd.png') repeat fixed 0 0 #FAFAFA !important ;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    Return to Top Plugin can be found here.

  18. ashu8000
    Member
    Posted 8 months ago #

    @rdellconsulting -Thanks a lot .How did you create grey boxes with some text.Same way I would like to use more colours for full width box.

  19. ashu8000
    Member
    Posted 8 months ago #

    @rdellconsulting - Please share how did you create two purple and green boxes under heading Our next productions in your site. There is margin on both side.Is it possible to have these boxes without any margin?

  20. rdellconsulting
    Member
    Posted 8 months ago #

    Here's the HTML:
    http://pastebin.com/UdzvVBNa

    The relevant CSS items matching this:
    http://pastebin.com/k7Uf8T3E

    Simply remove the margin: 5px 5px if you don't want it.

  21. ashu8000
    Member
    Posted 8 months ago #

    @rdellconsulting: Thanks very much. I am not from software so could you please tell me where to put the HTML and matching CSS.

  22. rdellconsulting
    Member
    Posted 8 months ago #

    You can add the HTML via Dashboard>Pages>Edit, and the CSS via the CustomCSS panel or better still, a Child Theme.

    If you still don't understand then you'll need to some training tutorials on WordPress - there's lots to find on Google.

  23. ashu8000
    Member
    Posted 8 months ago #

    @rdellconsulting: Do I need to put both HTML and relevent CSS in style.css of child theme?

  24. ashu8000
    Member
    Posted 8 months ago #

    @rdellconsulting: Thanks . Got it but my boxes are of different sizes.How to align them?

Reply

You must log in to post.

About this Theme

About this Topic