Log in

No account? Create an account

Previous Entry | Next Entry

Adding anmated gifs.

  • Jun. 7th, 2009 at 8:24 PM

I was wondering how to animated gifs to your sidebar. I got my layout from the <lj user="thefulcrum">. I customized evrything to my liking, but I would love to add animated gifs to the sidebar.  The code I used is under the cut if that helps.


/* Template: (#25) Your Biggest Flan v. Regular Width  */
/* Date: March 4, 2007  */
/* S2 Style: Mixit  */
/* Available at http://community.livejournal.com/thefulcrum/ */
/* Made by Liz a.k.a. grrliz.livejournal.com */


/* -------------------------------------------------------- */
/* ---------- ADD YOUR HEADER GRAPHIC BELOW --------------- */
/* -------------------------------------------------------- */

#header {position: relative; height: 340px; background: url(http://img13.imageshack.us/img13/8574/sireesanwarstartrek021.jpg) top center no-repeat;}

- make sure that your height is the height of your graphic plus 40px
- e.g. if your graphic is 350px, your height should be 390px

/* -------------------------------------------------------- */
/* ---------- ADD YOUR HEADER GRAPHIC ABOVE --------------- */
/* -------------------------------------------------------- */


html {margin: 0px; padding: 0px; font-size: 100%; /* IE hack */ }

body {
 margin: 0px;
 padding: 0px;
 background: #333333;
 color: #333333;
 font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
 font-size: 62.5%;
 text-align: center;

a, a:link, a:visited, a:active {color: #FF0033; text-decoration: none;}
a:hover {color: #333333; text-decoration: underline;}

p {margin-top: 0.8em; margin-bottom: 0.8em;}

blockquote {margin: 0.8em 3em; padding: 1.63em; border: 1px dashed #FF0033; background: #dddddd;}

input, textarea, select {}

/* ----------------------------------------- */
/* ---------- PAGE STRUCTURE --------------- */
/* ----------------------------------------- */

/* -- don't touch the stuff below -- */

#page, #header, #content, #footer {position: relative; top: 0;}
#alpha, #beta, #gamma {display: inline; float: left; position: relative; top: 0;}
#footer {margin: -1px 0 0 0; /* HACK - removes space between content and footer */}
#page-inner, #header-inner, #content-inner, #alpha-inner, #beta-inner, #gamma-inner, #footer-inner {position: static;}
#header-inner, #alpha-inner, #beta-inner, #gamma-inner {overflow: hidden; /* hide content that is larger than the element dimensions */}
#alpha-inner[id] { overflow: visible; } /* FF MAC & PC will clip pager-top when accessing page anchor */

/* -- don't touch the stuff above -- */

#container {position: relative; margin: 0px auto; padding: 20px; font-size: 1.2em; line-height: 1.8em; text-align: left;}
#container-inner {min-height: 100%; text-align: left;}

#page {width: 760px; margin: 0px auto; padding: 0px; border: 1px solid #FF0033; background: #ffffff;}

#header-inner {margin: 0px auto;}

#content {text-align: left;}

#alpha {width: 560px;}
 .layout-tw #alpha {float: right;}

#alpha-inner {margin: 0 20px;}

#beta {width: 200px;}
 .layout-wt #beta-inner {padding: 1.8em 20px 20px 0px}
 .layout-tw #beta-inner {padding: 1.8em 0px 20px 20px}

.lj-view-archive #alpha-inner,
.lj-view-month #alpha-inner,
.lj-view-tags #alpha-inner {padding-top: 20px; padding-bottom: 20px;}

/* ---------------------------- */
/* ---------- HEADER ---------- */
/* ---------------------------- */

#header-content {overflow: hidden; text-transform: uppercase; text-align: center;}

#header-text ul.nav {position: absolute; bottom: 0px; left: 0px; width: 100%; height: 40px; line-height: 40px; margin: 0px; padding: 0px; border-top: 1px dashed #FF0033; border-bottom: 1px dashed #FF0033; background: #dddddd; text-transform: lowercase; }
#header-text ul.nav li {margin: 0px; padding: 0 0.9em; display: inline;}
#header-text ul.nav li.item {border: 0px;}
#header-text ul.nav a {color: #FF0033; font-size: 1.4em; text-decoration: none;}
#header-text ul.nav a:hover {color: #333333;}

#header-name {display: none; margin: 0px auto; padding: 1.2em 0; font-size: 2em; letter-spacing: 0.1em;}
#header-name a {color: #FF0033; text-decoration: none;}
#header-name a:hover {color: #333333;}
#header-description {display: none; margin: 0px auto; }

/* ----------------------------- */
/* ---------- ENTRIES ---------- */
/* ----------------------------- */

/* previous and next links */
.stream-header {display: none; padding: 10px 20px; text-align: center;}
.stream-footer {padding: 0px; text-align: center;}

/* entry container */
.asset {margin: 0px; padding: 0px 0px 13px 0px; border-bottom: 1px dashed #FF0033;}
.asset-inner {padding: 0 0 1.8em 0; }

.asset-header {padding: 1.8em 0 0.9em 0;}
.lj-view-entry .asset-header {padding: 0; }

/* entry subject */
h2.page-header2 {margin: 0px; padding: 0.2em 0; font-size: 2em; font-weight: normal;}
h2.page-header2 a, .lj-view-tags h2 {color: #FF0033; text-decoration: none;}
h2.page-header2 a:hover {color: #333333;}

abbr.datetime {
 margin: 0px; padding: 0px;
 list-style-type: none;
 color: #666666;
 font-size: 1em;
 text-transform: uppercase;
 text-align: right;

/* entry body, meta, tags */
.asset-content {margin-bottom: 0.9em; padding-bottom: 0.9em; }

/* entry text */
.asset-body {padding: 0.9em 0;}

.asset-body a {color: #FF0033; font-weight: bold; border-bottom: 1px dashed #FF0033; text-decoration: none;}
.asset-body a:hover {color: #333333;}
.asset-body dt {border-bottom: 1px dashed #FF0033; font-weight: bold;}
.asset-body dd {margin-left: 3.6em; padding: 10px; background: #dddddd; border: 1px dashed #FF0033; border-top: 0px; }

/* date and time */
div.asset-header ul {margin: 0px !important; padding: 0px !important;}
div.asset-header li.item {padding: 0px;}

.ljuser {display: inline !important;}

/* userpic */
.user-icon {float: right; margin-left: 5px; padding: 1px; background: transparent !important; text-align: center;}
.user-icon img {border: 1px solid #82cadb;}
.user-icon span {background: #ffffff !important; text-align: center;}

/* mood, music, location */
.lj-currents ul {margin: 0px; padding: 0px;}
.lj-currents ul li {list-style: none;}
.lj-currents img {display: none;}

.entryMetadata-label {font-weight:bold;}
.entryMetadata-content {margin-left: 2px;}

/* --- tags --- */
.asset-tags-header {
 display: block; float: left;
 width: 3.5em; /* matches .asset-tags-content width */
 height: 100% !important;
 margin: 0px; padding: 0px;
 font-size: 1em !important;
.asset-tags-list {margin: 0 0 0 3.5em; padding: 0px; list-style-type: none;}
.asset-tags-list li {display: inline; padding-right: 5px;}
.asset-tags-list a {white-space: normal !important;}

/* comments bar */
ul.asset-meta-list {clear: both; margin: 0px; padding: 0px; list-style-type: none;}
li.asset-meta-comments {display: inline; margin: 0px 10px 0px 0px;}

ul.asset-meta-list .item {border: 0px;}

.prevnext, .prev, .next {padding: 5px 0px;}

/* ----------------------------- */
/* ---------- SIDEBAR ---------- */
/* ----------------------------- */

.widget {margin-bottom: 20px;}
.widget-inner {}

.widget-header {margin: 0px 0px 5px 0px; padding: 0px 0px 5px 0px; color: #FF0033; border-bottom: 1px dashed #FF0033; font-size: 1.3em; text-transform: uppercase;}
.widget-content {margin: 0px; padding: 0px;}

.widget ul {margin: 0px; padding: 0px 0px 0px 20px;}
.widget a {color: #333333;}
.widget a:hover {color: #FF0033; text-decoration: none;}

/* profile */
.about-me-widget {display: none; text-align: center;}
.about-me-widget .widget-header a {color: #333333;}
.about-me-widget .widget-header a:hover {color: #FF0033;}
.about-me-widget dl, .about-me-widget dd, .about-me-widget dt {margin: 0px; padding: 0px; width: 100%;}

/* calendar */
.calendar-widget {}
 .calendar-widget table {width: 100%; text-align: center;}
 .calendar-widget p {margin: 5px 0px; padding: 0px; text-align: center;}
 .calendar-widget tr:first-child a {background: #ffffff; border: 0px;}
 .calendar-widget td a {display: block; width: 100%; color: #FF0033; background: #dddddd; border: 1px solid #FF0033;}

/* link list */
.typelist-widget li.item {margin: 0px; padding: 0px; }

/* tags */
.categories-widget .widget-footer {padding: 20px 0px 0px 0px;}
.categories-widget li.item {margin: 0px; padding: 0px;}
.categories-widget li.tag {display: inline; padding: 0px 1px; background: none; }

/* post summary */
.archive-widget li.item {margin: 0px 0px 5px 0px; padding: 0px;}

.links-widget .widget-list .item {
 margin-bottom: .2em;
 border: none !important;

.widget-list .tagcloud {
 list-style: none !important;
 display: inline !important;
 color: #ff0000 !important;
 white-space: nowrap !important;
 border-left: 0 !important;
 width: 100% !important;

/* syndication, LiveJournal link, designer link */
.designed-widget {display: none;}

/* ----------------------------------- */
/* ---------- COMMENTS PAGE ---------- */
/* ----------------------------------- */

/* Comments ---------------------------------------*/
#comments {padding: 0px;}

div.comments-inner h2 {margin: 0px; padding: 1.5em 0 0 0; color: #FF0033; font-size: 2em; font-weight: normal;}

.comment {margin-bottom: 1.8em; padding: 0.9em 0; border-bottom: 1px dashed #FF0033;}
.comment-odd {}
.comment-even {background: #ffffff;}

.comments-nav {margin: 20px; text-align:center;}

/* --- reply, freeze, screen, etc ---  */
.comment-links {margin-top: 0.9em; font-weight: normal; text-align: right; font-size: 1em;}
.comment-subject {font-weight: bold; }
.comment-date {margin-top: 0.9em; margin-bottom: 0.9em;}

/* Fix height in IE */
.comment {height: 1%;}

/* Quick Reply  ---------------------------------------*/
.quickreply {margin-top: 1em; width:90%; padding-top: 5px; padding-bottom: 10px;}

#commenttext, #subject {width: 90%;}

#comment-form {width: 500px;}

/* ------------------------------ */
/* ---------- ARCHIVES ---------- */
/* ------------------------------ */

/* Calendar/Archive ---------------------------------------------------------------------- */

ul.year {text-align: center; padding: 0px;}
ul.year li {display: inline; padding: 0px 5px;}
table.yeartable {margin-left: auto; margin-right: auto;}
table.yeartable td.yeardate, table.yeartable td.yearday {border: 1px solid #FF0033;}
table.yeartable td.yearday {background-color: #dddddd; text-align: center;}
td.yearmonth {border-style: none; font-weight: bold;}

dd.viewsubjects {margin: 0 0 .75em .75em;}

.lj-view-month table {}
.lj-view-month widget table {margin: 0px !important;}

/* -------------------------- */
/* ---------- MISC ---------- */
/* -------------------------- */

/* Sponsored Plus ---------------------------------------*/

#ad-5linkunit {
    clear: both;

#ad-leaderboard {
        margin-bottom: 10px;

/* Utility Code --------------------------------------------------- */

/* clear floats, inspired by positioniseverything.net/easyclearing.html */
.widget .user-pic:after {
content: ".";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0.1px;

/* float in post bodies around enclosures */
.asset-body {
height: 1%;

/* Win IE < 7 */
* html #header-name a { word-wrap: break-word; }


/* ----------------------------------------------------------------------- */
/* ----------------------------------------------------------------------- */


( 8 comments — Leave a comment )
Jun. 8th, 2009 02:54 am (UTC)
On the sidebar page found under the Customize Style options - here: http://www.livejournal.com/customize/options.bml?group=sidebars

...You should be able to add your image(s) to the custom text box. Click the down arrow next to the word "Custom" to expand the choices and the custom text box will be right there.

Your sidebar is quite narrow so keep in mind images should probably be no wider than say, 130px, to allow room for margins and padding.
Jun. 8th, 2009 03:02 am (UTC)
Okay I followed the link and I got three boxes. They say:

1. Title to use for custom text sidebar module
2. URL to link to from custom text sidebar module
3. Body of custom sidebar module

I have entered stuff in the third box but when I check my journal, there is nothing there. Can you only add animated gifs in paid account?
Jun. 8th, 2009 03:19 am (UTC)
It seems you should be able to...I just did (check my blog - there's a spinning arrow beneath my custom text now) - did you make sure your code looks like this:

The code I used looks like this:

your alt text goes here
Jun. 8th, 2009 03:20 am (UTC)
I can't see what the code is suppose to look like. It's a red x.
Jun. 8th, 2009 03:24 am (UTC)
Let me try that again.

Does your code looks like this:

<img src="http://yourlinkhere.gif">

My code looks like this:

<img alt="your alt text goes here" src="http://www.animatedgif.net/arrowpointers/arrow.lt.spin_e0.gif" style="border: 0pt none ;">
Jun. 8th, 2009 03:26 am (UTC)
Okay thanks for the new code. What I meant to say is I found out how to show on my lj the custom text.
Jun. 8th, 2009 03:24 am (UTC)
nevermind i got it working thank you!
Jun. 8th, 2009 03:24 am (UTC)
OK, you're welcome.
( 8 comments — Leave a comment )

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars