Jump to content

Archived

This topic is now archived and is closed to further replies.

gavred

Page Title with BG Graphic

Recommended Posts

gavred

Hi Guys, 
 

I wonder if you could help me. I'm trying to add a simple background graphic to a page title. (See attached.) 

I know I could just create each graphic and add it to the top of each of page as an image, but I'm wondering if there's a better way? 

 

If you have any suggestions I'd be very grateful. 

 

For reference, the site i'm building is www.pjwalshlaw.com. 

 

Thanks, 

Gavin.

Share this post


Link to post
Share on other sites
gavred

Thanks for replying Danny. I really appreciate it. 

 

Ok, so bear with me... On each page I give it a title via the WP-Loop Standard Options. 

 

Then I have the BG image here: http://www.pjwalshlaw.com/wp-content/uploads/2015/05/PageTitle_BG.png 

 

So as an example: On this page: http://www.pjwalshlaw.com/the-firm/

What CSS do I need to add and where do I add it? In the Pagelines Editor or in the standard options via inline styling?

 

Apologies for the basic question.  

Share this post


Link to post
Share on other sites
gavred

Hi Danny, 

 

Thanks again for your initial help with this. I would be very grateful if you could provide me with another line or two on how I can achieve the effect I'm looking for. 

I've followed the skew suggestion in the link you provided and added the following to the CSS in the pagelines DMS Less Fallback; 

h3.pl-section-title {
    font-size: 19px;
    line-height: 22px;
    margin: 0 0 12px;
    background-color: #8e1710 ;
	 transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    -webkit-transform:skewX(-20deg);
    padding: 3px 6px 3px 6px;
	color: #ffffff;
	text-decoration: none;
	width: 300px;
}

I'm getting most of the way but the skew doesn't seem to be applying. 

In addition the width is set at 300px but the titles have varying lengths and I'm hoping to have the BG end approx 5px away from the end of the title with the skew if that's possible.  

 

Any further help you could give me would be greatly appreciated.

Share this post


Link to post
Share on other sites
Danny

In the code above, please remove it as is isn't needed.

Then add the following:

 

.section-postloop .pl-section-title {
  background-repeat: no-repeat;
  padding: 5px 8px;
  color: #FFF;
}
 
Which will give you the following - https://cloudup.com/cok_WAhiU_d

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gavred

Danny, 

 

Thanks for coming back to me. I've added your suggested CSS and it's ideal. It's exactly what I was hoping for. 

My only issue is on the longer page titles the background image doesn't stretch to the end of the title. 

This is a good example of the issue: http://www.pjwalshlaw.com/wills-probate-and-estate-management/

 

I can make the background image longer but if I do that then it's too long for the shorter titles. Not the end of the world but it would be cool to get it spot on. 

 

Is there a way I can achieve a unified effect on all page titles of 5px past the end of the title wording and then the skew? 

 

If not no worries & thanks once again for your help with this. It's really appreciated. 

Share this post


Link to post
Share on other sites
Danny

I don't think there is a way to achieve with universally on all page titles when they're different lengths. Therefore, I think the best thing to do would be to look into using CSS. I recommend asking your question on Stack Overflow and see what they suggest.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gavred

Ok. Thanks Danny. 

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Steve Webb
      By Steve Webb+
      I am having an issue with DMS editor not loading.  Just keeps spinning and spinning.
      Have tried several things - Logged in and out, cleared cache, deactivated all plugins, but the issue persists.
      I even had our host restore from a backup a few weeks ago, when I know it WAS working, as I edited a text box on the homepage.  The restore from backup didn't help either.
      Also, the front end of the site shows that the site is framed, or boxed now (whatever you call it), instead of full width as it was previously (last week).
      Dev console shows that there are php errors in Google maps - file is attached.
      Can someone please help?  Not sure what else I can do here...
      Thanks in advance.
      -Matt

    • tuciudadenred
      By tuciudadenred+
      Hi everyone, what happens is that the web page metrosalarmas.com has a google tags which I have not attacked where I can look to remove those tags and be able to locate the correct ones.
    • Steve Webb
      By Steve Webb+
      I am having an issue with DMS editor not loading.  Just keeps spinning and spinning.
      Have tried several things - Logged in and out, cleared cache, deactivated all plugins, but the issue persists.
      I even had our host restore from a backup a week ago, when I know it WAS working, as I edited a text box on the homepage.  The restore from backup didn't help either.
      Also, the front end of the site shows that the site is framed, or boxed now (whatever you call it), instead of full width as it was previously (last week).
      Dev console shows that there are php errors in Google maps - file is attached.
      Can someone please help?  Not sure what else I can do here...
      Thanks in advance.
      -Matt

    • JawDesigns
      By JawDesigns
      Hi everyone,
      Flywheel have reported errors on my clients site 'www.racewaredirect.co.uk' and it's not loading. Can someone please provide some information on how to fix this? The site has never experienced these issues before.
      Thanks,
      James Wilson
    • MissT
      By MissT+
      Hi there,
      I've got an issue with 3 websites built with DMS since I migrated them from http to https that I need help with please.
      When any changes are made - e.g. new posts added or existing posts amended - certain sections of the live site seem to break e.g. image headers hang and don't load (b/g on canvas section), sliders hang and don't load (Revslider), flipper section doesn't load.
      Logging in and then clicking 'Edit the site using DMS' seems to fix the problem. Often if I try to open up another browser window to edit the site / re publish I'm unable to as the page wont load / hangs while trying to load.
      Any ideas how to fix this? On a couple of the sites I've installed a caching plugin as I thought it might be a loading speed issue but it's still happening.
      Website URL's can be provided privately.
      Many thanks in advance.
×