Headings on pages as on Home Bordered

How I managed the headings on the pages as on the homepage?

Settings via the Customizer:

Title bottom margin: 75
Title text transform: Uppercase
Italicize titles? On
Title style: Bordered

Hello there,

To replicate the widget title style on the page title, add the following CSS code into Appearance > Customize > Additional CSS in your site dashboard.


.page .entry-title {
  font-size: 28px;
  text-transform: uppercase;
  margin-bottom: 75px;
  padding: 0 0 10px;
  font-weight: bold;
  position: relative;
}

.page .entry-title:after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #222;
  width: 90px;
  height: 3px;  
}  

Regards,
Kharis

many thanks for the answer!

I would like however that the titles edged as here on the homepage also on the under pages to be displayed.

In addition, I have the heading always centered.

http://www.2gloss.de/page/

And can you give me possibly a code with which I can in the texts headings also so fashion?

Is that possible?

Hello there,

Try this CSS code and let me know how it works.


.page .entry-title,
.su-column .su-column-inner > h3 {
  font-size: 28px;
  text-transform: uppercase;
  margin-bottom: 75px;
  padding: 0 0 10px;
  font-weight: bold;
  position: relative;
  text-align: center;
}

.page .entry-title:after,
.su-column .su-column-inner > h3:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  background-color: #222;
  width: 90px;
  height: 3px;
  margin-left: -45px;
}  

Regards,
Kharis

So far times great.

However, I would not like the uppercase rather a Title style: Bordered is displayed as on the home page:
http://www.2gloss.de/page/

And also in Italicize.

Regards,
Kai

Hi Kai,

Try to use this code:


.page .entry-title,
.su-column .su-column-inner > h3 {
  display: inline-block;
  border: 2px solid #000;
  border-radius: 5px;
  padding: 15px 10px !important;
  font-size: 28px;
  text-transform: uppercase;
  margin-bottom: 75px;
  padding: 0 0 10px;
  font-weight: bold;
  position: relative;
  text-align: center;
  margin-left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);    
}

Regards,
Kharis

thank you!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Could one still manage that the heading has no line break?

For example

Hello there,

Add this CSS code:


.page .entry-title,
.su-column .su-column-inner > h3 {
  width: 100% !important;
}  

To apply the heading style on a specific page, use page ID. So, the code will look like this:


.page.page-id-366 .entry-title,
.page.page-id-366 .su-column .su-column-inner > h3 {
  width: 100% !important;
}  

Regards,
Kharis