Widgetized page: Add title decoration

On widgetized pages there is a decoration line beneath the title (as displayed on the attached image):
55

Thanks in advance!

Hello,

Widgetized pages should have it by default, can you please provide a link to relevant page?

Kind Regards, Roman.

Sorry I meant the service pages. They don’t have the decoration: www.sostegisch.com/text

Thx!

Hello, you can try to do this with additional jQuery and CSS code.

  1. Please install and activate Insert Headers and Footers plugin that will allow you to insert JavaScript (jQuery) code.

  2. Go to your Dashboard → Settings → Insert Headers and Footers → add the following code to Scripts in Header section, and click Save button.

<script>
    jQuery(document).ready(function(){
        jQuery('body.page-template-single-service .entry-title').prepend('<span class="title-decoration"></span>');
    });
</script>
  1. Add the following CSS code. You can add CSS code in Customize → Additional CSS section.
body.page-template-single-service .entry-title {
	font-size: 36px;
	text-align: center;
	margin: 0 0 75px;
	position: relative;
}

body.page-template-single-service .entry-title::after,
body.page-template-single-service .entry-title .title-decoration::before,
body.page-template-single-service .entry-title .title-decoration::after {
	content: '';
	position: absolute;	
}

body.page-template-single-service .entry-title .title-decoration::before,
body.page-template-single-service .entry-title .title-decoration::after {
	width: 30px;
	height: 1px;
	bottom: -15px;
	background-color: rgba(92, 98, 101, 0.3);	
}

body.page-template-single-service .entry-title::after {
	width: 6px;
	height: 6px;
	bottom: -18px;
	border-radius: 3px;
	background-color: #d2d8da;
	left: -webkit-calc(50% - 3px);
	left: -moz-calc(50% - 3px);
	left: calc(50% - 3px);
}

body.page-template-single-service .entry-title .title-decoration::before {
	left: -webkit-calc(50% - 40px);
	left: -moz-calc(50% - 40px);
	left: calc(50% - 40px);
}

body.page-template-single-service .entry-title .title-decoration::after {
	left: -webkit-calc(50% + 10px);
	left: -moz-calc(50% + 10px);	
	left: calc(50% + 10px);
}

Kind Regards, Roman.

This too is perfect. Thank you very much!

You are welcome! :slight_smile:

Please feel free to ask any other questions that you might have in future.

Kind Regards, Roman.