Make your own inset top on homepage

[Kevin]

HI there,

Please look at my attachment. I assigned a green area:

How to get a FULL background color there? Just like in the inset top widget?

Website is: http://nlwouw-bischheim.savviihq.com/
Voorbeeld_2015-08-20.png

Attachments:

You must be logged in to view attached files.

[Anonymous]

Hi Kevin,

It seems that you have used bottom section(green border content) within main content part. Please use the ‘Inset Bottom’ widget to display the bottom widget, so that you can easily customize that section. follow the step below to find the ‘Inset Bottom’:

=>Goto=>Appearance => Widgets=> Inset Bottom(Add the content here for bottom inset):

Please add the code of css below to change background color of inset bottom:

.lr_widget_inset_bottom .container {
    background: #ddd; /* Your color code here */
}

Note: use the custom css plugin or child theme stylesheet to write the css.

Thanks

[Kevin]

Hi Umesh,

That is not what I mean.. I want to display it on the Homepage so that content in green section I made that on the page Home just like the other content you see on the homepage. You get me? And that stroke (the green area) should be given a different color. Below this content I have to put some more content so it has nothing to do with that widget.

I hope you understand me?

[Anonymous]

Hi Kevin,

Okey, if you want that section inside content with difference background, you need to change few line of html. There is two column inside the green section, so you need to make first both column inside single

. ad you can customize their background:

For your reference here is html code looks like as below:

       
Content One
 
       
Content Two

For custom css code:

.col-md-12#custom-col{
      background: your color code (for eg :#232323)
}

Please let us know for any issue further

Thanks

[Kevin]

Looks like a good solution, but unfortunately it doesn’t work..

This is the code (with my own content in it):

AFBEELDING

NIEUW: MITSUBISHI OUTLANDER PHEV
De Mitsubishi Outlander PHEV in het kort:
- Veel fiscaal voordeel voor ondernemers
- Brandstofbesparend
- Trekvermogen 1500 kg
- Actieradius 900 km
- Standaard 4wd
- Automaat
- Ruim interieur met vijf zitplaatsen
- Meer dan voldoende laadvermogen
- Hoge zitpositie met rondom goed zicht
- A-label

[Anonymous]

Hi Kevin,

Please add the following css to fix the issue:

.col-md-12#custom-col {
    float: left;
}

Thanks

[Kevin]

The background color appears, but it is not 100% full width. It is in the container with the left/right margins.

How to make it full width?

Take a look at the website for example (in previous posts is the link)

Thanks!

[Anonymous]

Hi Kevin,

It seems that you are still working on layout/development of site. Could you please explain more about content and layout which parts are showing in all pages and which are only for home page, so that we provide exact solution for your layout. We would appreciate if you could send us the screenshots as it will help us to understand your query/issue better.

Thanks

[Kevin]

HI,

See screenshot:

The red area is how it is now, but it needs to be like the green area (full width).

And the text above this area should be below this area (marked with the purple arrow).

I hope you understand me now?
Voorbeeld2.png

Attachments:

You must be logged in to view attached files.

[Anonymous]

Hi Kevin,

It seems that there is error in the html (Like using of

and other html tags), please send the wp-login details to our email [email protected], so that we could fix the layout for you.

Thanks

[Author]

Posts