style_system | add tags to converted LJ style, plus add 'edit' to recent page

Entry tags:

add tags to converted LJ style, plus add 'edit' to recent page

Hello,

I recently transitioned from LJ to Dreamwidth. I managed to have my layout appear almost identical to my LJ one, but I still have a few issues.

For some reason I can't get tags to show with my entries. What code do I need, and where do I put it, for it to work?
I would like to have an 'edit' link beneath each entry on the 'recent' page, so that I could quickly edit an entry, without having to select that entry first.

In case anyone is interested, this is my current theme layer. I'm sure, by trying to get things the way I want, I managed to maybe break it? If anyone could have a look and help me out, that would be great!

icicle.home.xs4all.nl/Themelayer.docx

Flat | Top-Level Comments Only

Sweet! Okay, first question first: how much verisimilitude to the current style are we after? That is, what are the most important parts of your style to preserve and how close are we aiming to exact replication? We can get the colorways + basic layout without doing very much custom work at all, just using the wizard. If you want to go further than that, we can then start delving into tweaking the CSS to match your current layout more closely.

I think I have found two suitable candidate core2 styles that could serve as decent bases:

Dusty Foot -- example of your journal in it
Transmogrified -- example of your journal in it

What they each have the ability to do that your current style does:

* They have the ability to do the two column layout with the header above that matches the width of those two columns
* They have the menu between that header and those two columns

Additionally, they have some abilities that your current style doesn't have:

* They make attempts to work on mobile!
* That edit link you wanted is there
* You'll have access to a bunch of different side widgets like the search one if you want that can all be rearranged how you like them

You have a paid account and that means that no matter what we do with this, if you decide it doesn't work out you will be able to revert back, your list of styles is here and take note of the one you are currently using:

https://www.dreamwidth.org/customize/advanced/styles

If you tell me which base style you'd like to start with--ignore things like color/borders which are all very easy to change, keep an eye out for the "bones" of the style; I tried to pick examples that sort of matched your color feel a bit but obviously it's not exact.

Additionally, know that while we are working on this, you can switch back to your current style using that advanced styles page when you're not doing work on it so that it's not disrupting your DW experience the whole time we're hammering it out.

Edited 2020-01-30 00:43 (UTC)

Thank you SO much!

Sweet! Okay, first question first: how much verisimilitude to the current style are we after? That is, what are the most important parts of your style to preserve and how close are we aiming to exact replication? We can get the colorways + basic layout without doing very much custom work at all, just using the wizard. If you want to go further than that, we can then start delving into tweaking the CSS to match your current layout more closely.

What I'd like to have is the same color scheme, the ability to use the header image, and to have the same font.

I also want to have some items removed from the header menu, like I have now. And I'd also still like to have the mood icon left, images for text like tags, and mood. But those are things I might be able to work out myself with the help of this group? But I have NO clue how to change a theme into one of my liking, so any help there is appreciated!

I think Transmogrified is best to start with, from what I can tell.

So the following changes are ones we can do exclusively in the style wizard without much fuss and a minimum of custom CSS. It's a good first pass, if I do say so myself, especially given that you don't seem to need the replication to be pixel perfect. Here's a preview of about where the below instructions will get you. I realized in the thing up there I linked to Dusty Foot twice, so I ended up using it?

Page Set Up

Pick a starting theme here on the list of Dusty Foot themes.

Towards the bottom of the style pages: The page set up you want is "2 Columns (sidebar on the right)"

Colors:

I used your journal and a website called ColorHound to get the list of colors involved, here's a list of the ones you can use and the places I've put them in my example:

#000000 -- black -- module background color, module border color, page header background color,
page footer background color, entry background color, entry border color
#415b8e -- that purple/blue color -- page background color, all link colors (unless you want hover effects!), module title color,
entry title color
#999999 -- gray
#9b9b9b -- gray
#9d9d9d -- gray
#d9d9d9 -- gray
#d9f0ff -- light blue
#ffffff -- white -- entry text color,
#f1f1f1 -- gray
#fafafa -- gray
#ff0000 -- red

I think there's other details you can tweak around with, I'm hoping giving you the list of colors will help you experiment with that.

Display:

The part you might want to tweak here is the navigation strip colors to match the ones in your style

Presentation:

You want "Place of icons in entries and comments" to be left to match what your style is doing.

Text:

You can use this to alter the text used for a whole bunch of things! For instance, in the "Navigation" section you can turn "Profile" into "About Me"

Or in the entry section you can change the "comment/comments" to "thoughts"

Or in the "Options" section you can change the "Previous" to "Earlier"

Fonts:

"verdana,sans-serif" looks like your preferred journal font

You can tweak the default font size here, too, for different items. Your default font size is smaller than the my browser's default 1em.

Images:

Put https://p.dreamwidth.org/c9c7dff16106/-/icicle.home.xs4all.nl/ajeheader1.jpg in the header background image part, don't tile, top center. We'll set the height of the header in our custom CSS.

Modules:

Unclick the ones you don't want. On your current style you have:

* Profile #1 in the main module section, with your default icon displayed but not the other things
* The link list #2 in the main module second (note: only you will see the manage links bit at the bottom, but it will take you to the place to edit them!)
* The calendar #3

You don't have any other modules. The secondary section goes at the bottom of the page.

Custom CSS section:

There's a couple touches that I felt would be appropriate to round out your style via Custom CSS.

/* You want your journal to be as wide as the header image and it's just easiest to do it like this
But when we get under 900px we'll start using the default journal's media queries */
@media only screen and (min-width : 900px) {
  #canvas {
     width: 900px;
  }
}

/* I think this is a bug in the style honestly, because we put in the header height and it should listen
   to that, it just gets overridden further down, but nevertheless here we are */
#header {
   height: 300px !important;
}

/* Don't display the journal title or page title */
#header #title, #header #pagetitle { display: none; }

/* turn the pagination links into buttons matching the original style */

/* Make the navigation happen at the bottom of the header, turn those links into buttons as well */

#header { position: relative; }

@media only screen and (min-width : 900px) {
  #header .module-section-header {
     width: 900px;
  }
}

#header .module-section-header { position: absolute; bottom: 0; left: 0; }
#header .module-navlinks { background: none !important; border: none; }
#header .module-navlinks a {
  padding: 10px;
  text-transform: uppercase;
  text-decoration: none;
  background-color: #415b8e;
  color: white;
}

/* Give the content a bit of padding so things don't bump into the menu */
#content {
  padding-top: 1em;
}

/* Make the entry subjects lowercase instead of uppercase */
.entry .entry-title { text-transform: lowercase; font-variant: none; }

/* Don't display the network navigation item */
.module-navlinks li.list-item-network { display: none !important; }
/* Don't display the memories navigation item */
.module-navlinks li.list-item-memories { display: none !important; }
/* Don't display the tags navigation item */
.module-navlinks li.list-item-tags { display: none !important; }

/* align the navigation items to the center */
.module-navlinks ul { text-align: center; }

/* Center the back/forth navigation links */
#content .navigation { text-align: center; }

/* This removes the top pagination if you want
#entries .navigation .topnav { display: none; }
*/

/* Make the back/forth pagination into buttons -- I didn't like how this looked with the
   menu buttons 
#content .navigation .page-back a, #content .navigation .page-forward a { 
  padding: 10px;
  text-transform: uppercase;
  text-decoration: none;
  background-color: #415b8e;
  color: #FFF; 
 } */

THINGS I DID NOT ATTEND TO:

* Your date of post is before the title of the post in the original: this is changeable if we want but will take some S2 digging
* You have your website in your navigation header. Here, it's in the profile module. This is another thing we can change that will take S2.
* If you want your links in the sidebar to be center aligned, that's CSSable
* I'm sure there's a bunch of other tiny details that, once you get things up and running come to me and we work through the things you would like to alter.

IF ALL THE ABOVE IS TOO OVERWHELMING

Let me know, I could just hand over what those changes would make in a theme layer and we can used advanced customization to just put them all into place instead of making you tweak stuff through the wizard. However! I do think doing it through the wizard will help give you a feeling for how to work through tweaking core2 styles in the wizard as an exercise and show you just how much you can do with it! If you get into more tweaking, there's a bunch of guide stuff here that might be useful.

Edited 2020-02-02 05:46 (UTC)

Again, thank you so much! I'll give this a go, and when I feel like I'm stuck, I'll get back to you!

Wow! Thanks so much! It's already looking so much better now!

* Your date of post is before the title of the post in the original: this is changeable if we want but will take some S2 digging

I'd like that please!

* You have your website in your navigation header. Here, it's in the profile module. This is another thing we can change that will take S2.

I'd like this too, please.

There are some other tweaks I'd like to have, if possible:

Can this: https://icicle.home.xs4all.nl/Screenshot%202020-02-03%20at%2019.11.24.png

be changed into this: https://icicle.home.xs4all.nl/Screenshot%202020-02-03%20at%2019.10.53.png ?

Also, can I get rid of this below Links in the sidebar? https://icicle.home.xs4all.nl/Screenshot%202020-02-03%20at%2019.11.37.png

~~And this at the top of the entries? https://icicle.home.xs4all.nl/Screenshot%202020-02-03%20at%2019.11.50.png~~

And can the spaces between each item be more narrow perhaps? https://icicle.home.xs4all.nl/Screenshot%202020-02-03%20at%2019.12.00.png

~~Oh, and can the links in the header bar be shown bold?~~

I think that's about it. Again, thank you so so SO much!

Edit: how can I have the Mood text appear white, instead of the same color as Tags?
And also: how can I have the images for Mood and Tags aligned correctly?

Edited 2020-02-04 22:16 (UTC)

Flat | Top-Level Comments Only

add tags to converted LJ style, plus add 'edit' to recent page

no subject

no subject

no subject

no subject

no subject