Jump to content
sidianmsjones

How to put a png next to the Highlight?

Recommended Posts

sidianmsjones

Site is www.ccforte.com, but you won't be able to see what I'm working on.

 

Ok see the decorative ornament things next to the word "Categories"?  GkWdyC1.png

 

I did that in Photoshop and would just like to do the same in Pagelines.

 

My main question is just how to get those in there so they show up on all Highlight sections. My bonus question is, how can I get them in there so they only show on one Highlight section?

 

Thanks so much for any help!

Share this post


Link to post
Share on other sites
Rob

Hi,

 

Since I can't see the specific highlight section live, this is a best guess.

 

I'd say make the image for the highlight a background without the word CATEGORIES. Let the highlight section add the text.  Set the background to the highlight section generally, on a global basis, but if you only want it on one page, then just prefix the highlight's CSS with .page-id-XX (where XX is the page ID number assigned by WordPress).

 

I apologize, but I don't really use Highlight too often, so I'm not familiar with its CSS. Since it's a full-width section though, you should be able to find it easily using Chrome's Inspection Tool or Firebug.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
sidianmsjones

That idea is working pretty well for me! Just a little more tweaking needed. So here is the less file for Highlight, in which I placed the background image. The only problem is that the bg image doesn't move very smartly when resizing the browser. What would be the smarter way for me to arrange this? Maybe put the bg under a different part of the highlight?

#highlight {

	text-align: center;

	.content-pad .highlight-area {
		padding: @baseLineHeight 0 @baseLineHeight/2;
	}

	.copy-pad .highlight-area {
		padding: 15px;
	}

	.highlight-head{
		line-height: 1.3em;
		font-size: @h1Size * 1.3;
		background-image:url('http://www.ccforte.com/wp-content/uploads/2013/06/Divider011.png');

		
	}
	.highlight-subhead{
		font-size: @h3Size / 1.4;
		color: @highlightSubHeadColor;
		font-family: @altFontFamily;
		font-weight:normal;
		color: fadeout(@pl-text, 25%);
	}

	.hl-image-bottom{
		margin: @baseLineHeight 0 0 0;
	}

	.highlight-splash img {
		max-width: 100%;
	}

}

Share this post


Link to post
Share on other sites
sidianmsjones

This is what it does when I make the browser smaller. Honestly it seems like the best way would still be my first inclination, in which there are two separate image files - one for the left and one for the right. And then have them both follow the "Categories" text as it moves.

e99JloK.png

Share this post


Link to post
Share on other sites
sidianmsjones

Mind you I'm still very nooby at this, so please let me know if you have a better idea.

 

Perhaps there is a way for me to assign some attributes to the image, like a changing percent width or something?

Share this post


Link to post
Share on other sites
sidianmsjones

Ok I'm figuring this out pretty well now. I swear I've gained a couple levels in CSS today. :)

Share this post


Link to post
Share on other sites
Rob

You're learning... I'll give you that! :)

 

Your CSS though is somewhat erroneous in that you have elements within elements.

 

If you go to http://jigsaw.w3.org/css-validator/ you can click the By direct input tab, and paste your copied CSS code there to determine whether the code is correctly written.  Make your corrections; copy and paste at Dashboard > PageLines > Site Options > Custom Code.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×