Jump to content
Sign in to follow this  
missyjknox

*****HTML*****

Recommended Posts

missyjknox

This question began here, then when it seemed I couldn't get an answer I tried to simplify the question here. At the end of the day, I??™d like to create this hover effect and here is the background image for this PageLines site. From what I can tell, the power-button target within the HTML is not PageLines standard and had to have been input. My background image was generated using CSS. I have several questions, but let??™s start with this issue first: 1. Do you agree with my comment above regarding the power-button target? If so, how can I accomplish same? Where in PlatformPro do I input the HTML?

Share this post


Link to post
Share on other sites
missyjknox

Hi Catrina, I want the hover to be placed on my home page only in the center of the heart. Here is the code you helped me with to accomplish the background image:

body.page-id-1477 #page-canvas {background:url(http://acedoubleyou.com/wp-content/uploads/2011/07/concept4.png)}

Share this post


Link to post
Share on other sites
catrina

Did you create this image yourself? If so, how did you create it and do you still have the editable file?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
missyjknox

Yes, I created the image myself in Photoshop and it has been tested using a generator and works fine. I also have the editable copy.

Share this post


Link to post
Share on other sites
catrina

Which part of the image is going to change on hover? Is it going to be just the heart?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
missyjknox

The hover is not on the home page now. It will be placed over the heart similar to the power button placed over the background image of the website I mentioned above.

Share this post


Link to post
Share on other sites
missyjknox

I shared the hover image info in my initial post along with the generator I used to test it.

Share this post


Link to post
Share on other sites
catrina

Yes, but the heart (and not everything around it) is going to be what changes on hover?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
missyjknox

From where I stand, the heart has nothing to do with what I am trying to accomplish, it is simply a background image like this

Share this post


Link to post
Share on other sites
missyjknox

Did you look at the links in the initial post of this topic? Is my post confusing at to what my question is?

Share this post


Link to post
Share on other sites
catrina

I understand what you're trying to accomplish, but I am trying to see if there is an easier alternative. In the power button example, there is the background image and the power button image. I don't know what the webmaster did to create that because I've never seen it done that way before, so I'm trying to see if the approach that I know can be applied to your page.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
missyjknox

Here is a copy of an earlier post of mine. Is this not the same concept?: I found this tutorial by Bryan Hadaway to be much easier to follow. However, I have a few questions: 1. Where do I put the XHTML code; 2. What does the ".hov" represent in Bryan's initial CSS (link, image or section of page); and 3. Is an upload plugin required as noted in Bryan's as linked above?

Share this post


Link to post
Share on other sites
catrina

1. Is page that you set as the homepage a static page? 2. .hov represents the class given to the image link that has the hover effect. 3. If a plugin isn't mentioned in the tutorial, I doubt there is any plugin to install. Plus, I don't see any reason for a plugin to be used since it's a HTML/CSS solution.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
missyjknox

1. Yes, it is a static page. 2. This is why I continue to ask where I can create a class in PageLines using HTML. Is it done someplace in Cpanel like a .php file? 3. Here is where an upload plugin is mentioned, but I don't see where it comes into play

Share this post


Link to post
Share on other sites
catrina

1. Add the HTML to that page you set as the static page. 2. It's CSS that is added to Settings > Custom Code > CSS. 3. I don't see any reason to include the plugin either, so we can leave it aside for now.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
missyjknox

1. This goes back to my initial question, where do I go to enter the HTML in PlatformPro for my Home page?

Share this post


Link to post
Share on other sites
catrina

If you set the home page as a static page in Settings > Reading, the page should be editable by going to Pages and opening the page editor for it.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
missyjknox

Okay, I will try it later and let you know the result. Thanks so much for you help.

Share this post


Link to post
Share on other sites
missyjknox

I got the hover image to work using this code:

<style type='text/css'>
	a.img_roll:link, .img_roll{
		width:300px;
		height:80px;
		display:block;
	left:0px;
	top:0px;
		background-image:url(http://acedoubleyou.com/wp-content/uploads/2011/07/HomeText.png);
	}
	a.img_roll:hover{
		width:300px;
		height:80px;
		display:block;
	left:0px;
	top:0px;
		background-image:url(http://acedoubleyou.com/wp-content/uploads/2011/07/HomeTextHover.png);
	}
	</style>
	[/code]

. Please note how the left and top attributes of the code do not have any pixels noted, and I don't understand how the code is dictating where the hover is placed. How do I center it over the heart?

Share this post


Link to post
Share on other sites
missyjknox

Here is the remaining code:

a href="http://acedoubleyou.com/?page_id=578"></a

Share this post


Link to post
Share on other sites
missyjknox

Hey lynnkate, Thanks for reminding I needed to use another attribute in my code, which is position:absolute.

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

Sign in to follow this  

×