Header Style like seen on Demo

Posted in: Newspaper
Post count: 364
David
#199762
Oct 31, 2017 at 1:45 pm

Hi,

I would like to make my block headers look like seen here at the baby blog demo (square outline). But I can’t find this style under the block header templates. Could you please tell me how you created this?

Thanks in Advance!

Post count: 20688
Simion C.
#199787
Oct 31, 2017 at 4:13 pm

Hi,

Each demo has custom design, that is one of the design choices for the demo. It would depend where you want to make this customization, in some cases it could not work properly. The style is not available as a block header, it is made with CSS.
This section of code is responsible
– https://www.screencast.com/t/xJgciKdGg6r
– https://www.screencast.com/t/u96hgAwLabml
Try it with the default block template selected

.block-title {
text-align: center;
border: none;
margin-bottom: 25px;
}
.block-title span {
background: transparent;
color: #222;
border-width: 1px;
border-style: solid;
border-color: #ff9bd2;
padding: 10px 0 8px 0;
width: 100%;
}

This is the base code, it will apply to all block titles. Make modifications to it how you like.

Thanks

Post count: 364
David
#199809
Oct 31, 2017 at 9:15 pm

Hi Simion,

Thanks for your quick reply! The code you provided works well, except for the pages I build with Visual Composer. Do you know which classes I have to select for this?
Visual Composer also offers its own design options for each object but it seems that these options are not working. Probably they are blocked by theme settings?

Post count: 20688
Simion C.
#199876
Nov 1, 2017 at 11:03 am

Hi,

A simple modification needs to be made, the result would be like this (I have changed the color as your general color, but you can change it how you wish)
– https://www.screencast.com/t/qYAnqBInN
– https://www.screencast.com/t/z6MUCQdRiQIB
– https://www.screencast.com/t/J11aCLep
This is the new code, make further tests and see i everything is displayed properly

.block-title {
text-align: center;
border: none;
margin-bottom: 25px;
}
.block-title a,
.block-title span {
background: transparent!important;
color: #b001ff;
border-width: 1px;
border-style: solid;
border-color: #b001ff;
padding: 10px 0 8px 0;
width: 100%;
}

Thanks

Viewing 4 posts - 1 through 4 (of 4 total)
The forum ‘Newspaper’ is closed to new topics and replies.