Creating a responsive logo
-
-
- Deb Williams
- Elite Rocketeer
- Posts: 820
- Thanks: 3
-
"Never mind, I figured it out and forced the 1200px width on the IE rules."
I'm having the same problem with IE8 forcing to 960px rather than 1200px. How did you force the 1200px width on the IE rules?
Thanks -
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
What work for me....
For Metropolis
1—[/b] I create a new Gantry position between the Top position and the Header
(do not name it logo (in Metropolis) because the RT-Logo will show up even if turn off in template manager
Simple tutorial —> http://gantry-framework.org/documentation/joomla/customize/adding-module-positions
2— I assign a custom module to the new position
3— insert something like this in my custom html moduleI use the class rt-image and take out the height & width to make the logo responsive<div id="logo-graf"> <div class="rt-image"><img src="images/documents/construction/torrefaction-btm-logo.png" alt="torrefaction-btm-logo" /> </div> </div>
Tutorial: http://www.rockettheme.com/forum/index.php?f=676&t=178553&rb_v=viewtopic
I add this to my media css (in a custom less file) will probably work in custom css///*----- TABLETS ------------ */ @media (min-width: 768px) and (max-width: 959px) { ///*--Logo -- */ #rt-logograf {margin: -10px 0 0 -10px;position: absolute;z-index: 100;} } ///*----- DESKTOP ------------ */ @media (min-width: 960px) and (max-width: 1199px) { ///*--Logo -- */ #rt-logograf {margin: -10px 0 0 -10px;position: absolute;z-index: 100;} } ///*----- LARGE DISPLAYS ------------ */ @media (min-width: 1200px) { ///*--Logo -- */ #rt-logograf {margin: -10px 0 0 -10px;position: absolute;z-index: 100;} }
Note: —> logograf (#rt-logograf) is the name of the new position...
This make the logo totally flexible, you can put the link you want, yo can float the logo on top of all elements and you can change it easily if needed or different with languague.
In Metropolis work perfect on mobile....
- Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- Profit613
- Newbie
- Posts: 7
- Thanks: 0
-
Can someone point me in a direction to fix my logo positioning. I need to raise it a bit. I don't know where to locate the css for this as I am fairly new to using Rocket themes. Here is a link to my site:
www.abeltechdeals.com
Any help would be appreciated.
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
Can someone point me in a direction to fix my logo positioning. I need to raise it a bit. I don't know where to locate the css for this as I am fairly new to using Rocket themes. Here is a link to my site: www.abeltechdeals.com
Use Firebug (a firefox add-on) to discover and edit css.
Add your css to a custom css file
or a custom less file
Check RT infos to now how to name and wher to place those files... - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- NativeRadio
- Hero Rocketeer
- Posts: 308
- Thanks: 9
-
Hi Henning,
I'm having the same issue that Alessandro has. Everything works great except for a slight border around the image. Here's the link to the DEV server.
dev.exceptionalmarriage.com/
It's a png-24 transparent file.
Thanks as always Henning! - "When a man has pity on all living creatures then only is he noble."
~ Buddha ~
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
NativeRadio.com wrote:
Hi Henning,
I'm having the same issue that Alessandro has. Everything works great except for a slight border around the image. Here's the link to the DEV server.
dev.exceptionalmarriage.com/
It's a png-24 transparent file.
Do not see the “border”, what image ? the logo? - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- NativeRadio
- Hero Rocketeer
- Posts: 308
- Thanks: 9
- Perfect as always Henning! Thank you!!
- "When a man has pity on all living creatures then only is he noble."
~ Buddha ~
-
-
-
- DangerDynamite
- Sr. Rocketeer
- Posts: 145
- Thanks: 0
- Web Developer
- Henning where do you add that code to get rid of the shadow?
-
Time to create page: 0.074 seconds