Some WYSIWYG blocks aren't inherting my custom CSS

[TheGreyWizard]

Take a look at my main page:

ohiocannabis.com

As you can see I have all of my sections with rounded corners and have added custom CSS to do this, but there are a few new WYSIWYG blocks I've added that aren't inheriting these custom CSS attributes and still have pointed corners - what's the fix for this?

Same goes for my navigation bar - as a whole I have it with rounded corners, but the hovering links are still squared - yet besides the two corner nav links, the navigation bar is squared - is there any way to fix this?  Perhaps just change the hovering attributes of the two outside navigation tabs?

[danoise@renoise.com]

Using IPBoard4? 

Did you add custom CSS through the admin CP / templates and CSS editor? 

Because, when I look at the site it seems that there is only a single CSS property defined for this element:

.ipsNavBar_primary > ul > li > a {
 background: rgba(245,245,245,0.04);
 font-size: 14px;
 color: rgba(255,255,255,0.7);
 padding: 9px 25px;
 border-radius: 1px 1px 0px 0px;
}

Usually (I think), adding custom CSS means the browser will load two separate stylesheets (the default one and your custom one), and apply settings from those.
And, depending on the order they are loaded you might need to set the !important attribute to "force" the style to be applied. 

For example:

.ipsNavBar_primary > ul > li > a {
	border-radius: 10px 10px 0px 0px !important;
}

A radius of one pixel is hardly enough for it to be visible, btw. 

[steve00]

12 hours ago, TheGreyWizard said:

Take a look at my main page:

ohiocannabis.com

As you can see I have all of my sections with rounded corners and have added custom CSS to do this, but there are a few new WYSIWYG blocks I've added that aren't inheriting these custom CSS attributes and still have pointed corners - what's the fix for this?

Same goes for my navigation bar - as a whole I have it with rounded corners, but the hovering links are still squared - yet besides the two corner nav links, the navigation bar is squared - is there any way to fix this?  Perhaps just change the hovering attributes of the two outside navigation tabs?

Because the rounded corners are using:

.ipsWidget.ipsWidget_vertical .ipsWidget_inner

and

.ipsBox:not(.ipsBox_transparent)

whereas the 'square' corners do not have any border-radius associated with them

find in your css:

.ipsWidget.ipsWidget_horizontal[data-blockid^="app_cms"]:not(.ipsBox) {
  padding:  !important;
}

and add:

border-radius: 15px;

 

[TheGreyWizard]

Ok I added your code to custom.css and all is good now, thank you.

But if I'm just adding WYSIWYG blocks from the block manager, shouldn't they inherit the rounded corner CSS attributes I had to add to my custom.css for the other sections/blocks?  That's what I'm confused about, I've added radius code for other blocks and sections, but only these couple required additional CSS?

[steve00]

7 hours ago, TheGreyWizard said:

Ok I added your code to custom.css and all is good now, thank you.

But if I'm just adding WYSIWYG blocks from the block manager, shouldn't they inherit the rounded corner CSS attributes I had to add to my custom.css for the other sections/blocks?  That's what I'm confused about, I've added radius code for other blocks and sections, but only these couple required additional CSS?

It would if you used the css that applies to them all (trick is to find a css that is used by all of them)

in this case using:

.ipsWidget {
    border-radius: 15px;
}

would apply to all the blocks (side column as well) including any other 'blocks' that you may use elsewhere (e.g. forum, blog etc)

so you could remove all those others that are using the border-radius and just add the above and they will all have the border-radius

Regards your navigation issue (I am sure I added this in my last reply but seems it has gone missing)

in custom.css add:

html[dir="ltr"] .ipsNavBar_primary > ul > li > a {
  border-radius: 10px 10px  ;
}

 

[TheGreyWizard]

Awesome, thank you!  I'll have to play around with removing the other border-radius as I've added quite a few to get my entire site to look that way, but I've added the code you gave me as well.

Also the navigation code worked too, but I had to change it to 10px 10px 0px 0px as it was rounding out the bottom corners as well and looks a little better with flat bottoms since the nav bar butts up flat against the body

Thanks again for your help!

[steve00]

11 hours ago, TheGreyWizard said:

Also the navigation code worked too, but I had to change it to 10px 10px 0px 0px as it was rounding out the bottom corners as well and looks a little better with flat bottoms since the nav bar butts up flat against the body

Thanks again for your help!

yes .. when posting it removed the 0 0 from the line (seems still a bug not fixed yet)