S2Bloggish

Hi. I am new to Insane Journal, the Bloggish Layout, working with CSS code and I have a free account. On my journal I am using a code found here  http://asylums.insanejournal.com/freelayouts/2957.html#cutid1 (the hyberlink button isn't working for some reason for me). I can't seem to find the part of the code that changes the colors in the side bar nor can I figure out how to add links. Any help would be greatly appreciated.

Does anyone know how to change the color of the text in an entry title?

I would also like to know how to change the color of the text in the titles of the modules (i.e. Page Summary, Tags), if anyone knows that.

Thanks!

( Solved )

With the information provided by this comm, I've been able to add CSS to place an image for the top banner for zomgapocalypse, but there is an issue. I've been unable to find the way to stop either the journal title or journal name from appearing on top of the image.

I've seen another free account using links on top of their banner (over at nosuchplace), as well as having an image divider between posts. I've analyzed the source for the layout and while I've tried to add snippets to my own css portion, it usually doesn't turn out with anything showing. As such, I've reverted back to simply the header image for now. Would anyone know what CSS I'm missing to be able to adapt those fucntions to my own community or at least stop the default journal name or title/subtitle from appearing on the layout? Any advice would be greatly appreciated.

Tired of the ugly icons and graphics on InsaneJournal? I've made a script that overrides them all and makes InsaneJournal a whole lot prettier. Interested? Just follow these easy steps:

1. Install the Stylish extension (if you don't already have it) and restart your browser once it is completed.
   
2. Go to the script's userstyle page here.
   
3. Click the button that reads 'Load into Stylish' under 'Install options'.
   
4. When a box pops up, click 'Save'.
   
5. Enjoy!

Is there any way to move the metadata (mood, location etc) down to under the entries with a basic account using the custom CSS, or is a paid account required to do this?

Any help would be appreciated.

As I've said over at LJ. My IJ's sidebar has gone to the bottom of the page and I don't know how to fix it. I'm desperately searching for help. ;_;

EDIT: Fixed, pay no mind to this entry.
( The code )

... but I'm driving myself crazy with this. I can't seem to align my journal (mod_squad)to the center to fit properly in the background. I added a 100px wide background image to the container attribute and set my pagebody to 900px. It fits fine when it comes to width, but it keeps aligning to the left. I can't seem to get it to align center within the container.

Any ideas?

Hi! I've found this comm very useful in the past, but this time I can't find what I need.

I want to erase my username from the banner. I can change the size, the alignment, the font . . . but I can't figure out how to remove it entirely.

Please help?



- I'm paid, BTW.

Hi all,

I would like to start creating my own Bloggish layouts.  Does anyone have a basic template that I can use as a base?

Thanks so much in advance!!


:)

I have a question: Why is it when I switch to Bloggish on my main account, the navigation links don't show, but on my fic journal they show?

If someone could help me fix this I'd be grateful.

EDIT: How does one create extra space on the content and sidebar? My entries and sidebar are touching the edges.

And my comment links are showing. Here's my codes:

/* ENTER WIDTH HERE */ #container{ width:557px; background:white; } /* THE REST */ #pagebody, #banner{ width:auto; margin:0; } #alpha{ width:25% !important; margin:2; } #beta{ width:74% !important; border-left: 1px solid red; margin: 2; } body { background:url('http://i2.photobucket.com/albums/y33/elgato-gamgins/Layouts/white-stripescopy.gif') center top; } #banner-inner { } .banner-user { width: 70px; margin-top: 4px; font-size: 10px; } .banner-user-photo { border: 3px double red; } #banner-header { display: none; } #banner-description { display: none; } #banner { width: 557px; height: 299px; background: url('http://i2.photobucket.com/albums/y33/elgato-gamgins/Layouts/white_stripes5copy.gif') center top; margin-left:0px; margin-right:0; margin-top:0; margin-bottom:15px; border-bottom: 2px solid red; } #beta-inner { background: none; background-color: transparent; } .module { color: black; } .module-calendar .module-content { margin: 5px 10px 15px 10px; } .module-calendar a, .module-calendar a:visited { color: red; } .module-mmt-calendar .module-content table, .module-calendar .module-content table { font-size: 11px; } .module-mmt-calendar { width: 445px; margin: 0; } .entry-content { margin: 10px 15px; font-family: 'trebuchet ms', verdana, sans-serif; font-size: 11px; } .entry-more-link { font-weight: bold; } .entry-footer { margin: 10px 15px 20px 16px; font-weight: normal; text-align: right; } .content-nav { margin: 5; padding: 10px 15px; } body { font-family: verdana, 'trebuchet ms', sans-serif; font-size: 11px; font: red; } a { color: red; text-decoration: none; } a:visited { color: black; } a:hover { color: white; text-decoration: underline; } #banner a { color: red; text-decoration: none; } #banner a:visited { color:black; } #banner a:hover { color: white; } .module-content a { color: red; font-weight: bold; text-decoration: none; } .module-content a:visited { color: black; } .module-content a:hover { color: white; } .module-header a, .trackbacks-header a, .comments-header a, .comments-open-header a, .archive-header a { color: red; text-decoration: underline; } .module-header a:visited, .trackbacks-header a:visited, .comments-header a:visited, .comments-open-header a:visited, .archive-header a:visited { color: red; } .module-header a:hover, .trackbacks-header a:hover, .comments-header a:hover, .comments-open-header a:hover, .archive-header a:hover { color: red; } .entry-more-link, .entry-footer, .comment-footer, .trackback-footer, .typelist-thumbnailed { font-size: 10px; }

Hi there! Okay, so I’ve got my community account mostly fixed (still tweaking but the important bits are done) and I’ve noticed that the comments aren’t collapsing, thereby forcing the text to get all wonky once it moves so far to the right. The best example of this is here:

http://asylums.insanejournal.com/_equinox_/1121.html

Comments get harder and harder to read as they progress becomes they keep moving to the right, but the space never opens up. Is there a way to force the comments to collapse once they reach a certain number or once the comments move so far right on the page?

Thanks!

There are two elements of good CSS missing from the Bloggish template: one is the ability to have clickable links for entry titles. We remedied that last week by adding special code to our custom theme layer.

This week we're going to correct Bloggish's other missing element: the lack of clickable journal titles and subtitles.

If you missed it, please check out my last post to s2_bloggish - it has instructions for those of you just getting started with creating and editing custom theme layers, which is what we're going to do now.

When you're ready, get things "clicking" by pasting the following code into your custom theme layer and clicking Save & Compile. This code will turn just the journal title into a clickable link:

function print_banner(Page p) { container_open("banner"); print safe """<h1 id="banner-header"><a href="$p.base_url">$p.global_title</a></h1>"""; print safe """<h2 id="banner-description">$p.global_subtitle</h2>"""; container_close(); }

If you would like to turn both the journal title and the subtitle into two separate, clickable links, paste the following code into your theme layer:

function print_banner(Page p) { container_open("banner"); print safe """<h1 id="banner-header"><a href="$p.base_url">$p.global_title</a></h1>"""; print safe """<h2 id="banner-description"><a href="$p.base_url">$p.global_subtitle</a></h2>"""; container_close(); }

Clicking on either of these links will now redirect readers to your home page, so if your journal is located at http://exampleusername.insanejournal.com, clicking these links will return them to that page. You can see (and click on!) a working example at my journal.

The natural question arising out of our newfound ability to linkify the title and subtitle is, "Can I change these links to point to another page on my journal, or even to another journal or website?" The answer is "yes". Replace the Global Title or Subtitle, as seen in the following code...

<h2 id="banner-description"><a href="$p.base_url">
$p.global_subtitle</a>
</h2>

...With any URL you like. In the example I'm using on my journal, it's a link to the new journal that I write about AOL in. So your string for my subtitle would look like this...

<h2 id="banner-description">
<a href="http://antiaol.insanejournal.com">
$p.global_subtitle</a></h2>

Updated 3-21-08. No one told me the answer to the question I originally posed about changing the URL with this code - it just seemed silly that we couldn't, so I put the URL where you see it now and compiled...and got it right on my first try :).

First of all, thank you for this amazing community. It's been SUCH a help.

Now.. I have what I KNOW is a very simple question, but I can't figure out how to make it work.

I want to change the background image in the '#body'. In other words get rid of the grey honeycomb image and replace it with my own.

In my 'custom css' area I'm putting:

#body { background-color: #6f8f9a; background-image: url("http://www.sean-astin.net/newlj/pattern_127.gif");
background-repeat: repeat;
}

But this doesn't seem to be having any effect.

Can you help?

Thank you!!

Clickable links for entry titles are a much-desired feature of Bloggish that isn't included in the default or styled CSS. Our only option to make Bloggish entry titles "clickable" is to override the "Page::print entry" function through a custom theme layer.

Essentially, what this hack does is add the "permalink" functionality that you see at the end of each post to the post title (and it's a pretty neat trick, in my opinion). It will work on Bloggish or Style Contest themes (since the Style Contest theme is actually built off of the default Bloggish CSS.)

To do this you'll need a paid account to add a custom theme layer to. Please see carriep63's tutorial on how to create your own custom theme layer if you don't already have one. Also see how to add your theme layer in the correct order so you won't lose your CSS overrides. If you've already created a custom theme layer make a copy of it (cutting and pasting it into Notepad works) and save it before making any changes. That way you can quickly restore your original theme layer if anything goes wrong.

Once you've ensured your custom theme layer is in place and working nicely, copy and paste the code in the text box below into your theme layer and click "Save & Compile" to see it in action. Now your Bloggish entry titles should seriously "click".

function Page::print_entry(Entry e) { "<div class='entry'" + ($e.dom_id ? " id='$e.dom_id'" : "") + ">\n"; var bool showtime = $*opt_showtime; var bool showdate = not $*opt_datehead; var bool showposter = false; var bool showuserpic = $*opt_userpic_main; if ($.view == "friends") { $showtime = true; $showposter = true; $showuserpic = $*opt_userpic_friends; } if ($.view == "day") { $showdate = false; } if ($.view == "entry" or $.view == "reply") { $showdate = true; } if ($.view == "entry") { $showuserpic = $*opt_userpic_entrypage; } if (not $e.poster->equals($e.journal)) { $showposter = true; } if (($showuserpic and defined $e.userpic) or $showposter) { "<div class='entry-userpic'>"; if ($showuserpic and defined $e.userpic) { "$e.userpic"; } if (($showuserpic and defined $e.userpic) and $showposter) { "<br />"; } if ($showposter) { print safe "<p class='poster'>"+lang_posted_by($e.poster, $e.journal, $this)+"</p>"; } "</div>"; } "<h3 class='entry-header'>"; if (defined $e.security_icon) { print "<span class='lj-entry-securityicon'>$e.security_icon</span> "; } """<a href="$e.permalink_url">$e.subject</a></h3>\n"""; "<div class='entry-content'>\n"; "<div class='entry-body'>\n"; $e->print_metadata(); $e->print_text(); "</div>\n"; var string sep = "<span class='separator'>|</span>"; "<p class='entry-footer'>"; if ($showdate or $showtime) { print lang_posted_date_and_time($e, $e.time, $showdate, $showtime)+" $sep "; } "<a class='permalink' href='$e.permalink_url'>$*text_permalink</a>"; if ($e.comments.show_postlink) { " $sep "; $e.comments->print_postlink(); } if ($e.comments.show_readlink) { " $sep "; $e.comments->print_readlink(); } $e->print_linkbar(); "</p>"; "</div>\n"; "</div>\n"; }

I took this code from a community that av8rmike either runs or helps out in but I can't find the page it's on (see comments). The code here is pretty much the same thing.

I'll be back soon...I'll post here from time to time with carriep63's permission since there are a few more hacks I'd like to share with S2 Bloggish users. Also, please note that I can't write S2 code or tell you how to alter the code I post here so it will behave any differently.

New post: How to turn your S2Bloggish journal title and subtitle into clickable links.

Last edited 3-19-08.

Hi. S2 completely overwhelms me. I've only ever done things with the S1 overrides. I only want to do three things with my layout but I have no idea where to even start. o_0 Here's what I am trying to do:

1. Customize the color scheme.
2. Remove the text from the header and add an image with a border.
3. Change the little pic in the module headers.

I really have no idea where to start. I'm a free user if that matters. If someone could just point me in the right direction that would be great. It just really overwhelms me and I get confused very easily when trying to sift through everything to find what I need. Thanks for any help...

Is there anyone you can embed videos on Bloggish? I've tried it so far with Imeem & YouTube but to no success.

Thanks :)

If I'm doing this in the wrong place, I'm sorry but I've tried everything. Is there anyway to do the layout on this journal with the header but without the line going through it and worldwound mods on it?

Hi,

Does anyone know of an a override for a background & header for the Bloggish layout? Preferably for a free user.

Thanks :)

I've been working on a new style based on Bloggish with a little inspiration from Expressive, and I'm running into a peculiar problem. I wondered if anyone else had seen this or knows what's up.

I have modified the propgroup Sidebars and prop_init so that users can pick which modules to put in which sidebars and in what order. That part has gone quite well.

I have also added two more modules (one for layout credits and one for a second free text module). This is where I'm having problems. Even when I call them by name, in prop-init, instead of by variable, they are not appearing on the journal page. The layer compiles, so it doesn't seem to be a syntax issue, and I copied the form of those modules directly from the existing free text box, which is appearing just as it should.

The modules in question are customtext2 and layercredit, they're down at the bottom of the module functions, under customtext and before pagesummary.

I've looked through the documentation, but nothing mentions needing to do anything more to get a function working that to write it and call it. I am at a loss why these are not working, and only hope someone here will have a clue to give me.