facetofcathy: four equal blocks of purple and orange shades with a rusty orange block centred on top (Default)
[personal profile] facetofcathy
Title: Fluid Navstrip
Credit to: n/a
Base style: All
Type: Code Snippet
Best resolution: Display widths of 20em and up
Tested in: Firefox, Chrome, Opera
Features: Cells and contents of the navstrip table wrap as required by the user's display.

This is a code snippet that will work on any layout/style (barring any conflicts with other styles applied to the navstrip). The purpose is to make the navstrip wrap at larger font sizes or smaller screen widths rather than triggering a scrollbar as it does normally.

Screencaps of the code in action under the cut )

The content of each cell in the navstrip table wraps as well, and you can get below a 20em display width without any scrollbars. There is padding added, a font size in ems, and a generous line-height. The result has a little more space around the log out button, which may help with accidental log outs for some users.

There is a 1px bit of visible body background colour at the right, left and bottom edges some of the time in all tested browsers, but I see that with my background image as well.

This code should work correctly in all browsers except IE7 and lower.

Padding, font-size and line-height can be customized at will.

code under the cut )
rise: (arting)
[personal profile] rise
[personal profile] foxfirefey suggested we post this here after we posted to [community profile] style_system. We'd somehow never realized we could also post code snippets and layout mods. Sorry about that!

Title: CSS for when you like Crisped but don't like ALLCAPS
Credit to: [community profile] flatlanders
Base style: Crisped
Type: Code Snippet
Tested in: Chrome 14.0.835.186, Fluid 0.9.6, Safari 5.1

We'd been noticing among a few people we know that there are some who really, really like Crisped, but don't want to use it because they can't figure out how to get rid of the forced ALLCAPS that are just about everywhere in it. So, we threw together some Custom CSS to get rid of all the forced uppercase:

code )

If you don't like the forced lowercase in the header, you can also use this:

more code )

And finally, because the decreased letter-spacing can make the navigation menu and header hard to read for some people, especially after removing the allcaps, here's some css that fixes the letter-spacing, too:

also more code )

Hoping this helps!
sistabro: (stilts)
[personal profile] sistabro
Title: CSS for fixed page navigation in Blanket
Credit to: [personal profile] sistabro
Base style: Blanket
Type: Code Snippet
Best resolution: Fluid Width
Tested in: IE9, Chrome, Firefox5 on a PC. Safari 5.0.4 courtesy of [staff profile] denise
Features: Fixed Previous, Next and Top of Page links

I posted a layout today, Wavy Gravy, and one of the features in it was adding the Previous, Next and Top of Page links to the fixed navigation section at the bottom of every Blanket based layout. It seems like it would be something very useful for anyone messing around with Blanket; I honestly can't think of a reason why you wouldn't want to add these links to the navigation section. So below you can find the CSS that sets all of that up.



Now, I will be the first to admit that I am a complete n00b at CSS, so the code is probably messy, but it does work. The only thing is that it's really sensetive to font size changes. If you change the font sizes, you will also have to adjust the padding and positioning of pretty much everything to make things line up. But once they are aligned, it responds quite well to in browser zooming; it only breaks if your main navigation links get so big they go to another line, which is really, really big.

Feel free to use and modify. I hope folks find it useful.
stormy: βͺ ππŽπ“πˆπ‚π„ ❫ 𝑫𝑢 𝑡𝑢𝑻 𝑻𝑨𝑲𝑬 𝑴𝒀 𝑰π‘ͺ𝑢𝑡𝑺 ⊘ (Default)
[personal profile] stormy
At heart, I'm a geek, and CSS and graphics are a huge time sink. A lot of times you'll notice that I'll update a single thing on my journal layout. In boredom, I decided to share some coding with you guys that you might appreciate!

JOURNAL INTERACTION LINKS



LIVE PREVIEW: [personal profile] stormy


On to the coding! )

Copy and Paste Center

For easy breezy links, simply copy and paste the following code into the bottom of the great big box on this page: http://www.dreamwidth.org/customize/options?group=customcss and feel free to ignore my blabbering on how it all works.


And if you want the color codes, I have those too! )

Profile

Dreamwidth Layouts

June 2017

S M T W T F S
     123
45678910
11121314151617
181920 21222324
252627282930 

Syndicate

RSS Atom

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags