Hi,
I made on center:
http://prntscr.com/99gmgi
but have problem to algin text to the left.
I change text-align: center; to text-align: left; but look that:
http://prntscr.com/99gncf
Problem is that on left side i dont have 100%.
Css what is use.
.td-page-header h1 {
overflow: hidden;
text-align: center;
}
.td-page-header h1:before,
.td-page-header h1:after {
background-color: #969696;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
max-width:5000px;
}
.td-page-header h1:before {
right: 0.5em;
margin-left: -50%;
}
.td-page-header h1:after {
left: 0.5em;
margin-right: -50%;
}Thank you.
Hi,
You will need to provide a link to the page so we can inspect it. We cannot provide a css solution based on assumptions. We need to see how your title works and if our code applies or if not, why it does not apply.
Thank you!
Of course.
https://lupa.org.pl/test-title/
—
Best
Hello john80,
Please try the code below and place it in Theme panel->Custom Css area, like this:
http://screencast.com/t/TmpSiiOAL
.td-page-header h1 {
text-align: left;
}
.td-page-header h1:after {
width: 100%;
}
.td-page-header h1:before {
display:none;
}
The result you should see here: http://screencast.com/t/wudlUcsyPo
Hope this helps!
Thank you!
Hi,
Thank you so much. Yes title of page is display correct 🙂
I try do this same with widget but something is wrong, can you check this?
http://prntscr.com/99y4ik
I add to child theme this:
.block-title {
border-bottom: none !important;
}
.block-title > span {
font-size: 20px !important;
overflow: visible !important;
background-color:transparent !important;
}
.block-title span {
overflow: hidden;
text-align: left;
color: #000;
}
.block-title span:before,
.block-title span:after {
background-color: #dadada;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
.block-title span:before {
right: 0.5em;
margin-left: -50%;
}
.block-title span:after {
left: 0.5em;
margin-right: -50%;
}
And to custum css in theme
.block-title span {
text-align: left;
}
.block-title span:after {
width: 100%;
}
.block-title span:before {
display:none;
}
Best
Hello,
You only need to use this custom css to get the widget to display as the title:
.block-title span{
width:100%
}
.block-title span:after{
width:58%
}
But unfortunately a different width must be specified for every widget as title length will not be the same. if you set it to.
It will require further customization.
result: http://screencast.com/t/xptoQ821kZAu
Thank you!
Hi
Thank you for your time you ARE awesome.
Best
