PDA

View Full Version : Feeds Icon (Moving/Changing)


Aaron Jors
Nov-04-2008, 06:22 PM
In the past I have had my feeds icon blocked from showing up on my page. I have just removed the code to have the feed reappear however I don't like where it is placed.

First I would like for only the feed icon to appear and to remove the available feeds and what are feeds text.

Second I would like the feed icon to be on the same line as the below text and appear just to the left.

Powered by SmugMug (http://www.smugmug.com/?referrer=ckvJCVWt3bwXz) | Portions © 2008 SmugMug, Inc. *ICON HERE*

Note: I would still like the text at the bottome to stay centered.

How can I do this?

Thanks, Aaron.

brandofamily
Nov-04-2008, 06:40 PM
Yes you can do it... I ran into various issues with different viewing styles to it took some time and effort to work it out. My code might not be the best but you are welcome to look at it by using Fire Fox web developement tools...
www.brandolinoimaging.com
The code is near the bottom and is labeled.... good luck...

Aaron Jors
Nov-05-2008, 02:29 PM
Thanks Anthony, I tried looking for the code but didn't find anything. To be honest I'm not sure what to look for.

Anyone else?

brandofamily
Nov-05-2008, 02:49 PM
Thanks Anthony, I tried looking for the code but didn't find anything. To be honest I'm not sure what to look for.

Anyone else?
this will get you close I think... I took it from mine and modifide it a bit... use Fire Fox Web Dev Tools to play with it...
/*Format Feeds in Footer*/
.feedStandard {position:absolute; margin-top:-20px !important; _margin-top:5px; margin-left:-65px;}

#cobrand_footer {width:800px; padding:0 10px; margin:0 auto; border:none; position:relative;}

#cobrand_footer .nav,
#cobrand_footer .text {font-family:"Gentium","Times New Roman", times, serif; margin-top:10px !important;}

#cobrand_footer #footer {margin:0; padding:0; width:800px; text-align:center;}

#cobrand_footer #feeds {width:16px; height:16px; position:absolute; top:0; ~top:3px; _top:0; right:185px; ~right:189px; _right:140px; visibility:hidden;}
#cobrand_footer #feeds a img {visibility:visible;}
#cobrand_footer #feeds #allFeeds {border:0; visibility:visible; position:absolute; right:-40px; _right:-40px; top:15px !important; margin:0; padding:0; width:194px; height:auto !important;}
#cobrand_footer #feeds .feedLine {margin-left:-5px; border:0;}
#cobrand_footer #feeds .feedName {width:194px; color:#e3cfb5 !important; text-align:center !important;}

.homepage #cobrand_footer {margin-top:-10px; ~margin-top:-5px;}
.homepage #cobrand_footer #feeds #allFeeds {width:600px; margin-right:-140px; _margin-right:45px; _margin-top:2px;}
.homepage #cobrand_footer #feeds .feedLine {width:185px; margin-left:0; border:0;}
.homepage #cobrand_footer #feeds .feedName {width:185px; color:#e3cfb5 !important; text-align:center !important;}

.featured #cobrand_footer {margin-top:-4px; ~margin-top:-5px;}

.singleImage #cobrand_footer #feeds #allFeeds,
.critique #cobrand_footer #feeds #allFeeds {border:0; visibility:visible; position:absolute; right:-86px; ~right:-92px; _right:-42px; top:15px !important; _top:17px !important; margin:0; padding:0; width:194px; height:auto !important;}
.smugmug #cobrand_footer #feeds #allFeeds {border:0; visibility:visible; position:absolute; right:-86px; ~right:-92px; _right:-42px; top:0px !important; _top:22px !important; margin:0; padding:0; width:194px; height:auto !important;}

.allthumbs #cobrand_footer #feeds #allFeeds,
.filmstrip #cobrand_footer #feeds #allFeeds,
.journal #cobrand_footer #feeds #allFeeds,
.slideshow #cobrand_footer #feeds #allFeeds,
.traditional #cobrand_footer #feeds #allFeeds
{border:0; visibility:visible; position:absolute; right:-86px; ~right:-42px; top:18px; _top:18px !important; margin:0; padding:0; width:194px; height:auto !important;}

Aaron Jors
Nov-05-2008, 02:59 PM
Thanks Anthony. That got it close but their are a couple of problems.

1. The icon is a bit to high and a bit to close to Inc.
2. The text font and text size of the Powered by Smugmug... line has changed.

Thanks, Aaron.

brandofamily
Nov-05-2008, 04:26 PM
Thanks Anthony. That got it close but their are a couple of problems.

1. The icon is a bit to high and a bit to close to Inc.
2. The text font and text size of the Powered by Smugmug... line has changed.

Thanks, Aaron.
If you aren't using fire fox and the web development tools you need to. It will allow you to play with the code and see what the changes will do w/o messing up you actuall CSS... try it, it's addictive

brandofamily
Nov-05-2008, 04:30 PM
this will change font back... the rest is up to you... it really is fun once you dig in...:D
/*Format Feeds in Footer*/
.feedStandard {position:absolute; margin-top:-20px !important; _margin-top:5px; margin-left:-25px;}

#cobrand_footer {width:800px; padding:0 10px; margin:0 auto; border:none; position:relative;}

#cobrand_footer .nav,
#cobrand_footer .text {margin-top:10px !important;}

#cobrand_footer #footer {margin:0; padding:0; width:800px; text-align:center;}

#cobrand_footer #feeds {width:16px; height:16px; position:absolute; top:0; ~top:3px; _top:0; right:185px; ~right:189px; _right:140px; visibility:hidden;}
#cobrand_footer #feeds a img {visibility:visible;}
#cobrand_footer #feeds #allFeeds {border:0; visibility:visible; position:absolute; right:-27px; _right:-40px; top:15px !important; margin:0; padding:0; width:194px; height:auto !important;}
#cobrand_footer #feeds .feedLine {margin-left:-5px; border:0;}
#cobrand_footer #feeds .feedName {width:194px; color:#e3cfb5 !important; text-align:center !important;}

.homepage #cobrand_footer {margin-top:-10px; ~margin-top:-5px;}
.homepage #cobrand_footer #feeds #allFeeds {width:600px; margin-right:-140px; _margin-right:45px; _margin-top:2px;}
.homepage #cobrand_footer #feeds .feedLine {width:185px; margin-left:0; border:0;}
.homepage #cobrand_footer #feeds .feedName {width:185px; color:#e3cfb5 !important; text-align:center !important;}

.featured #cobrand_footer {margin-top:-4px; ~margin-top:-5px;}

.singleImage #cobrand_footer #feeds #allFeeds,
.critique #cobrand_footer #feeds #allFeeds {border:0; visibility:visible; position:absolute; right:-86px; ~right:-92px; _right:-42px; top:15px !important; _top:17px !important; margin:0; padding:0; width:194px; height:auto !important;}
.smugmug #cobrand_footer #feeds #allFeeds {border:0; visibility:visible; position:absolute; right:-86px; ~right:-92px; _right:-42px; top:0px !important; _top:22px !important; margin:0; padding:0; width:194px; height:auto !important;}

.allthumbs #cobrand_footer #feeds #allFeeds,
.filmstrip #cobrand_footer #feeds #allFeeds,
.journal #cobrand_footer #feeds #allFeeds,
.slideshow #cobrand_footer #feeds #allFeeds,
.traditional #cobrand_footer #feeds #allFeeds
{border:0; visibility:visible; position:absolute; right:-86px; ~right:-42px; top:18px; _top:18px !important; margin:0; padding:0; width:194px; height:auto !important;}


you really will have to play since my code is specific to my site and is set specifically for 3 different browsers. I've done only the basic adjustments to get it close in FF

Aaron Jors
Nov-05-2008, 07:09 PM
Ok I was able to get everything to line up and work out but for some reason the feeds icon does not show on my about me, prints, guestbook, or contact tab.

My guess is that I blocked that at some point but I can't seem to find the code I used to block it.

brandofamily
Nov-06-2008, 02:16 AM
Ok I was able to get everything to line up and work out but for some reason the feeds icon does not show on my about me, prints, guestbook, or contact tab.

My guess is that I blocked that at some point but I can't seem to find the code I used to block it.
no images... no feeds....

jfriend
Nov-06-2008, 06:53 AM
no images... no feeds.... Or, gallery set to unlisted, no feeds shown.

uitdenbosch
Feb-06-2009, 06:03 AM
Im actually trying to get the same thing going here and what you posted worked but the icon is a little to seperated to the right of 'Portions © 2009 SmugMug, Inc."

I noticed you have yours nice and lined up...
what code did you edit to move it over a bit?

brandofamily
Feb-06-2009, 02:18 PM
Im actually trying to get the same thing going here and what you posted worked but the icon is a little to seperated to the right of 'Portions © 2009 SmugMug, Inc."

I noticed you have yours nice and lined up...
what code did you edit to move it over a bit?
Adjust the margin-left
.feedStandard {position:absolute; margin-top:-20px !important; _margin-top:5px; margin-left:-55px;}

uitdenbosch
Feb-07-2009, 04:51 AM
Adjust the margin-left
.feedStandard {position:absolute; margin-top:-20px !important; _margin-top:5px; margin-left:-55px;}

Genius! thanks:thumb