Jump to content

[SOLVED] Need help with where to edit 3 things in CSS, Is it possible?!?

generalexperts

By generalexperts
in Core developers

 Share

Recommended Posts

generalexperts Newbie

generalexperts

Posted
Posted (edited)

I need help with a few things. I've looked and tried just about everything. First for the Homefeatured block where it says Featured Products. I'd like to move that header over to match the content on the right side. (Shown by the red arrow). Everytime I make an edit it changes the margin for the New Products block also, I just want the featured products to change.

 

Next The Product title that is circled in red. I need help changing that. Everytime I change that, other words change in different blocks. How do I specify just for that area that is circled?

 

Last, When hovering over viewed products, specifically the top one, it gets really jumpy and the border bounces around. Can anyone help me fix that? 

Edited by generalexperts (see edit history)
Link to comment
Share on other sites
Alfakom.mk Newbie

Alfakom.mk

Posted
Posted

 

 

I need help with a few things. I've looked and tried just about everything. First for the Homefeatured block where it says Featured Products. I'd like to move that header over to match the content on the right side. (Shown by the red arrow). Everytime I make an edit it changes the margin for the New Products block also, I just want the featured products to change.

 

The cleanest solution is to add some css to your custom.css or to the end of global.css of your theme:

 

#featured-products_block_center h4.title_block {width:90%;}

 

 

 

Last, When hovering over viewed products, specifically the top one, it gets really jumpy and the border bounces around. Can anyone help me fix that? 

 

It doesn't happen on my desktop, tablet nor mobile phone, so it has something to do with your setup. Add some easing if you want to make it smoother or some delay...

 

 

 

Next The Product title that is circled in red. I need help changing that. Everytime I change that, other words change in different blocks. How do I specify just for that area that is circled?

 

That is the name of your product. If you change it, its normal that it will change in every single block/position that this product is mentioned??? - please explain a little bit more so we can help you...

  • Like 1
Link to comment
Share on other sites
generalexperts Newbie

generalexperts

Posted
  • Author
Posted

Thanks for the reply! The jumpyness occurs when you have viewed the two products. Then when you see both a you go over the links with the mouse, you will see the blue background fade in and the product image and links below will move up and down as the transition is occurring. Is there a way to have the frame that is around it only be the size of the one product (when only 1 product has been viewed) and then bigger when there has been two products viewed. And with enough space so the transition doesn't make the bottom product bounce around?

 

Yeah sorry about that. To be more clear... I'm not looking to change the name of the product. I would like to change the background color and the font color (without changing other links). I'm really going for this effect in my featured products block: http://tympanus.net/Tutorials/OriginalHoverEffects/

 

Thanks for your help!

Link to comment
Share on other sites
generalexperts Newbie

generalexperts

Posted
  • Author
Posted

I tried slowing down the transition in the blockviewed.css, it didn't make it less jumpy (when having 2 previously viewed products). Can anyone help from keeping those from bouncing the lower product around? 

 

Also still looking for help on the Home New Products block with changing just the title and not other things tied to it in CSS. ie, if I change the color to blue, other links on my site appear to be blue. how to differentiate?

Thank you!

Link to comment
Share on other sites
  • 2 weeks later...
generalexperts Newbie

generalexperts

Posted
  • Author
Posted (edited)

Still looking for help on the 1 problem with homefeatured block. The title I would like to edit without changing everything else. If I change the color of the product title in the homefeatured block, it changes it in other titles on my site. How do I differentiate here? I simply want to change the color of the title (only in the 4 squares) and the background (just behind the title).

 

thank you!

Edited by generalexperts (see edit history)
Link to comment
Share on other sites
Alfakom.mk Newbie

Alfakom.mk

Posted
Posted

Still looking for help on the 1 problem with homefeatured block. The title I would like to edit without changing everything else. If I change the color of the product title in the homefeatured block, it changes it in other titles on my site. How do I differentiate here? I simply want to change the color of the title (only in the 4 squares) and the background (just behind the title). View the image above to see what I'm talking about or please look at my site: http://tinyurl.com/n5pfy52

 

thank you!

Sorry for my late reply, i was on a vacation.

 

Add this to your custom.css and change the color coding to your need:

 

#featured-products_block_center h5.s_title_block a {
  color:#007;
  background-color:#e73;
}
  • Like 1
Link to comment
Share on other sites
generalexperts Newbie

generalexperts

Posted
  • Author
Posted (edited)

That worked, thank you! Now I'm trying to position them and i'd like the 'product_desc a' to be in the same place and the 'read more' button in the same place for all four areas. How can I get them the same if I center the one for the top left then the top right get's thrown off. Any ideas?

 

Also, still can't get blockviewed.css straightened out. When hovering over the first item, it pushes the last item down and up and down again as it is in transition. (have to view 2 products on my site to see this effect)...

 

Thanks again!

Edited by generalexperts (see edit history)
Link to comment
Share on other sites
Alfakom.mk Newbie

Alfakom.mk

Posted
Posted

Now I'm trying to position them and i'd like the 'product_desc a' to be in the same place and the 'read more' button in the same place for all four areas. How can I get them the same if I center the one for the top left then the top right get's thrown off. Any ideas?

Aha, now i understand what you want, but unfortunately it can be done only via positioning in the css.

It solely depends on two things: The length of the name of the product and the length of the brief description. Keep them around similar length and it will look like they are all positioned strict... 

  • Like 1
Link to comment
Share on other sites
generalexperts Newbie

generalexperts

Posted
  • Author
Posted

I made the change and made them both 50 in the homefeatured.tpl. The only problem is the top left product shows the product description and the 'read more' much lower than the other 3. If I move the top left one in position to be up higher, then the other three fall out of the box. Any ideas?

Link to comment
Share on other sites
Alfakom.mk Newbie

Alfakom.mk

Posted
Posted

This is the last one (for free).
Add this to your custom css.

It will position the name of the product in the upper side horisontaly.

It drops the PIC litle to the bottom.

It gaves  equal position to the moving info:

 

#featured-products_block_center li:hover .product_desc a, #featured-products_block_center li .product_desc a {
  margin-top: 0;
}
 
#featured-products_block_center h5.s_title_block a {
  height: 20px;
}
 
#featured-products_block_center li img {
  top: 20px;
}
 
#featured-products_block_center h5.s_title_block a {
  margin: -26px -7px 0px -7px;
}
  • Like 1
Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...