Hello! Yet again, I seemed to have been able to achieve what I wanted using previous advice you’ve provided. However, as I’m no expert, I’d appreciate someone checking the code to make sure I’ve not messed up and potentially breaking something elsewhere!

#top .no_margin.av_one_third {
    border-radius: 0px;
    border: 10px solid white !important;
}
.grid-content { background: #fff !important; }
.grid-entry-title { background: #fff !important; }
.avia-arrow { background: #fff !important; }
.main_color #js_sort_items { background: #fff !important; }

Hi Andy,

thanks, but that add a widget area below the menu / header and I want to place a ruler / divider right at the top off the screens so above everything else.

regards,
roderick

I found a way by myself, topic can be closed.

Hello Yigit,

Is there a difference where do I place it in functions.php.

Currently I placed it in the top and the excerpt text is not showing.

Regards,

Hi Vinay

The screenshot you have posted shows exactly what the problem is. On the left hand side of this page there is a blank column. That column should contain a Search box and then a list of Recent Posts, Categories, etc. But they have all been pushed further down the page (which you’ll see if you scroll down the page) because the video box extends over the line of the margin and into the margin column.

The video box should start at the right hand side of the grey vertical margin line, just as all the other content boxes do.

I want the style of the page to be similar to this post: http://www.freethinkinghealth.com/features/iodine/

I want both boxes – the video box and the text box to the right of it – to be in line with the rest of the text, to the right side of the margin line. I want the margin to be a continuous uninterrupted column showing the Search box at the top, then Recent Posts, then Categories etc – not a blank space at the top with everything forced further down the page by the video.

Thanks
Natalie

Hi,

Finally re-opening this one. I have set up a couple of generic entries on the linked page. I would like to do two things:

1) Make the background white
2) Put a 10px white gap in-between each of the entries

Is this possible and could you help me with the CSS?

Many thanks

EDIT
I was able to get a white gap by using the following CSS

#top .no_margin.av_one_third {
    border-radius: 0px;
    border: 10px solid white !important;
}

A couple of things resulted from this
A) the sortable area seems to be outside the colour section, I would like to move it down
B) I want the grey area behind the names to white
C) Is there any way to format the names within the grey area – i.e. make left aligned etc

Thanks for you patience!

• This reply was modified 9 years, 5 months ago by jonrouse. Reason: Additional issues raised

Hi Yigit and Basilis.

I’m using OSX EL Capitain
This is a screenshot with Chrome, and the 1px white line is on the bottom of the portfolio grid.

With firefox no borders are visibile, so is ok.

Whith Safari the he 1px white line is on the top of the portfolio grid.

Is very strange when you resize the browser window, sometimes the white lines disappear and sometimes appear.
Thank you,
Rosa

Hi Yigit,

We’re using the latest version of Enfold. We disabled all plugins and still the problem continued. Then we removed the layer slider that was being used on the top of the page, saved and then put the same layer slider back in and the problem was resolved. We’ve only done this on our staging server so far but we’all try the same on production later.

Thanks

Phil

Post Arrows are still stuck to the edge, I would like them placed inline on the page…

I tried the code above and then tried this as well…

#top .avia-post-nav {
position: absolute;
top: 70%;
}

.avia-post-prev {
left: 10%;
}

.avia-post-next {
right: 10%;
}

• This reply was modified 9 years, 5 months ago by bukkadesign.

Thank you very much for your answer!

I pasted it and + symbol disappeared

i have also this code:

.main_color .toggler:hover {
color: white;
background: #ffcc00;
}
.toggle_icon .vert_icon, .toggle_icon .hor_icon, span.toggle_icon {
border-color: #fff;
}

.toggle_icon {
position: absolute;
width: 15px;
height: 15px;
border-style: solid;
border-width: 0px;
top: 17px;
left: 10px;
}

.js_active .toggler { border: none !important; }

so i guess it conflicts with your somehow. Tell me please what should i delete or change?
Thank you!