Parwaiz Khan

Hi Menaka,

Thank you so very much for looking into it and giving the entire code to do the job – of course, I have also looked into the theme guides that you have put together – what a great job!

Now, php is my achilles heel, and the idea of modifying the function.php always gives me shivers. So, I may need a bit more advice as to:

1). Where exactly in function.php should I insert this code?
2). If I change the line
==> return str_replace(‘To search type and hit enter’, ‘Search site for ‘, $html);

To:==> return str_replace(‘To search type and hit enter’, ‘Search LifeVibrant.com ‘, $html);

Is the code causing the string, ‘To search type and hit enter’ to be replaced by the string, ‘Search LifeVibrant.com ‘ ?

Is it what you are suggesting?

While we are on it, can you also tell me if the “form.searchform.themeform” is the right element to style the ‘search box’ in css?

Thank you.

Parwaiz

Hi Denzel,

I finally applied the browser specific hacks to pull up content and the sidebars.
Here is the css that I applied – in case other users may have encountered the same issues:

/* Header-Ad section style mods */
#black-studio-tinymce-3 {
/* max-width:85% !important;
display:inline-block; */
float:right;
background: #f2eee8 !important;
margin-top: -5px;
margin-bottom: 50px;
}
@-moz-document url-prefix() {
.content, .s1, .s2 {
margin-top:-28px;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.content, .s1, .s2 {
margin-top:-28px;
}
}

Now, all the 4 browser are showing it OK (couldn’t test it on edge, though). The website (for those who may want to check out ) is:

https://lifevibrant.com

[I am marking the issue Resolved.]

Thank you.

Hi Denzel,
Seems you didn’t read my reply/request all the way – the fix that corrected the previous issue has created this new problem that I have mentioned.

Any idea how to correct this anomaly in FF and IE?

Please read my previous two replies.

Thank you.

Hi Denzel,

The problem is with the FF and IE – Chrome is OK.

In the IE and FF the“page.container” (content and both sidebars) is down by almost 30px – Safari and Chrome both are rendering the page as intended.

The subject of this support request is still the “Header – Image not aligned in Chrome” – but, thanks to your suggestion that problem is fixed. Now, that fix is resulting in this behavior in the IE and FF.

I tried to target some elements (.container-inner) – not doing the needed correction. I think. the elements that need to be targeted (only in FF and IE) are the “content” and the two sidebars.

Thank you very for all your help and support.

Hi Denzel,
If you look at the screen-shot and then open the same on Safari or Chrome, you will notice that the “page.container” (content and both sidebars) is down by almost 30px on your screen-shot (in comparison to what you will see on Safari or Chrome).

That is the issue i am trying to fix.

Thanks again for looking into it.

Hi Denzel and Salsaturation,
Thank you for looking into it.

Denzel, I had applied the following code:

#black-studio-tinymce-3.widget.widget_black_studio_tinymce {
max-width:850px !importnt;
background: #f2eee8 !important;
margin-top: -5px;
margin-bottom: 50px;
}

That had fixed the initial problem. Upon your response, I changed the max-width to %. Same effect – Thank you.

Now, this change is causing problem with the FF and IE. In both of these browsers, the “page.container” (content and both sidebars) dip down by almost 20px ( Chrome and Safari are rendering the page OK).

I am still playing with the css to try to fix it – may be, I should do some thing to target only the FF and IE.

Please let me know if you have any suggestions.

The site, again, is: https://lifevibrant.com

Thank you.

Hi Denzel,
Thank you for looking into it. Of course we can switch the widgets. But, you know both sidebars are not of the same width – s1 is wider than the s2.

I wanted to have the s1 (the wider one) moving next to the ‘content’ are and the narrower s2 moving all the way the right – Swapping the position of the two sidebars.

Any suggestions?

Thank you.

Superb – didn’t realize this feature is also there.

Thank you so very much.

Parwaiz

Well, I did figure it out – For those who may be having the same issue, here is the code that will accomplish the objective:

.main-inner {
background: #ffffff !important;
}

Of course, color can be of your own choice.

Thank you.

That workaround makes perfect sense – how to accomplish it? Where can I modify/edit the PIS to output the first 1-4, and then from 5-to whatever #?

Thank you.

Going to change the code – but somehow, during my continuous tinkering with the css/margin, later posts are staying within the 2-column layout.

I am still in the development (tinkering) mode. As I embark upon adding more pages and posts, I will observe and modify the code as needed.

I understand the vagaries of the web design – the behavior (rendition) of html/css is rather unpredictable – especially for non-developers like myself.

Thank you again for taking the time, looking into it, and helping me out.

Parwaiz

Further to report the viewport anomaly, the top two posts keep on breaking from 2 columns layout to single column layout, and back in reverse as we change the width of the viewport up and down. While, the bottom 2 posts (the ones posted earlier) remain steady all along in their 2 column layout.

What it could be – is it a bug that is causing this behavior?

Forgot to post – here is my entire CSS code for the PIS:

/* Posts in Sidebar Modifications */

.otw-widget-1 li.pis-li {
width: 47%;
height: 320px;
float: left;
margin-right: 5%;
margin-left:-12px;
border-bottom: 2px solid #F2F2F2;
}

.otw-widget-1 li.pis-li:last-child {
margin-right: 0;
}

.entry li.pis-li {
list-style: none;
}

/* – – -*/

.pis-thumbnail-img {
max-width: auto;
height: 130px;
margin-top: 10px;
margin-bottom: -20px;
}

a.pis-title-link {
color: #095108;
font-size:1.5em;
margin-top: -5px;
margin-bottom: -20px;
text-align: center;
}

p.pis-excerpt {
margin-top:-10px;
color: #333 !important;
}

/* End */

I changed the CSS – the two previous posts are now set in 2 columns – perfect. But, I just added 2 more posts, and I am noticing an unusual phenomenon.

All the 4 posts show OK within a certain viewport width – when I expand the width of the Viewport, the upper two posts get reset in a single column!

You can check this behavior at https://lifevibrant.com

What may be the cause of this?

Thank you.

Well, just tried both ways. None of them is working. The code the I have put in my child theme is:
.otw-widget-1 #pis_posts_in_sidebar-4 li.pis-li {
width: 48%;
height: 350px;
float: left;
margin-right: 4%;
border-bottom: 3px solid #FCFCFC;
}

.otw-widget-1 #pis_posts_in_sidebar-4 li.pis-li:last-child {
margin-right: 0;
}

.entry li.pis-li {
list-style: none;
}

Before, I had the line as: “.otw-widget-1 #otw-sidebar-1 #pis_posts_in_sidebar-4 li.pis-li”

Any ideas?