Kenran's Free CSS
Kenran's CSS Help Desk (Commissions)

βΈΆ β™ž βΈ·




An atypical Kenran sits behind a desk that has a computer and is covered with neat piles of paperwork and books. As you stand there waiting for her to notice you, she looks like she is concentrating intensely on whatever she is working on.

You clear your throat and Kenran looks up at you suddenly, just noticing you, she blinks weary, strained eyes to adjust against her nearsightedness.

"Oh, Hello, how may I help you?"
she asks with an inquisitive and friendly tone.




@Karin
Current Theme

(I didn't also edit this block because it felt unnecessary for the CB.)

Current Version

/* Nothing at the moment */





@Everyone
Themes I've Made


Profiles


Wikis

Events




@Everyone
Requests


° Leave a comment below with a description of what you would like. ° If you need help with inspiration here is [DM me about a link to] my pinterest to maybe help you get started.° I will keep you updated as to when I get your request and the progress. ° You will not receive code if you are rude or if you can't give a decent description. °

~ If you can dream it, I can build it! ~


- I'd like to have a link to a portfolio of available themes here or a portfolio in a section of its own, below. -

Updates


If your theme is out of date, I would be happy to fill in the missing pieces! πŸ’™πŸ˜‰πŸ’™




@Everyone
Tutorials


° If you want to learn how to do your own, please use the Profile Styling Guide! °




@everyone
Fonts

This is where I will keep track of the fonts we have if we can get some.~
~*~*~ Please, please, please ~*~*~

^w^

Practical


I think these will be useful

❧ Most of these fonts are a good idea

❧ The Robotos


Requests


Alphabetical order

❧ Architects Daughter

❧ Cinzel

❧ Comfortaa

❧ Montserrat





@Ookami Kenran
To-Do List


Personal


❧
Make in-page bookmarks to the end of the wiki/profile content, before comments Super handy! Especially on mobile~ Y'all might wanna check it out. ^w^


❧
New div idea: "new"; inline, highlights new things in a page It really was that easy! The hard part is choosing how to style it... NtS: ribbon effect


Themes


❧ Woody theme πŸͺ΅

❧ High Contrast (HR) 🐴

❧ Wisteria theme/s 🌺

❧ Rastafarian themesπŸŸ’πŸŸ‘πŸ”΄

❧ "'Merica" themes πŸ‡ΊπŸ‡Έ


βš”
Title:Kenran's Free CSS
Last changed:March 22 by Ookami Kenran
Author(s):Ookami Kenran, Karin
Page views:389
Visible to:anyone
Can be edited by:authors only
March 14, 2021 20:16 (3 years ago)
So it turns the menu items into buttons? For the default theme this seems to work well indeed. I'd be hesitant to add extra colors because that means they're bound to not match with some custom styles. At work we use variables and less files which makes it easier to reuse colors. Sorry it took me this long to check it out, I just really don't like messing with css, so I'm glad you're kinda good at it ^^;

ul.menu a { background:#90AED3; color:#274052; padding:5px 7px; border-radius:3px; }
ul.menu a:hover { background:#F0F4FA; color:#4678B3; }
ul.menu { padding-top:7px; padding-bottom:12px; }
Karin
March 15, 2021 1:30 (3 years ago)
No worries, I'll be your CSS Mule lol XD

I've been including it in my CSS lately. I don't mind filling the CSS to update the events, I try to s
Ookami Kenran
March 15, 2021 1:32 (3 years ago)
Oops.
*... I usually try to send you the updates for events anyways. (for things like the selected tab and top_right)
Ookami Kenran
March 18, 2021 19:36 (3 years ago)
Made a few changes to the modified old version
Ookami Kenran
March 19, 2021 20:57 (3 years ago)
ooh I think only using the pattern outside the site width is a great solution!
Karin
March 19, 2021 21:01 (3 years ago)
I miss the rainbow logo though, maybe we could use an edited version of that? Reposition the bunny a bit?
Karin
March 20, 2021 1:29 (3 years ago)
I intended to include it, but I couldn't get the link and forgot to ask you for it.
Ookami Kenran
March 21, 2021 16:40 (3 years ago)
need to edit bunny in logo, started, but need the rest of his ear...
Ookami Kenran
March 23, 2021 22:34 (3 years ago)
Soooo much css here ^^;
Karin
March 23, 2021 22:54 (3 years ago)
You mean this bunny ear?
I think the text color of the easter theme should be darker for contrast.

I love what you've done, thanks so much!
Karin
March 23, 2021 23:05 (3 years ago)
Derp, Yep! Thank you~

How's this?

No problem, I'm glad I can help! ^u^
Ookami Kenran
March 26, 2021 19:13 (3 years ago)
Updated the logo
Ookami Kenran
March 26, 2021 23:50 (3 years ago)
Think I'm going to add the rest of the body for mobile
Ookami Kenran
March 29, 2021 22:06 (3 years ago)
I think I liked it better when the bunny was to the right of the logo, it's so cramped up now. No hurry though, Easter is fast approaching and I won't be ready anyway.
Karin
March 29, 2021 23:48 (3 years ago)
Maybe in the middle? I suggest so because the end of the logo underlaps the avi on mobile.

A slightly unrelated suggestion: make the logo it's own element, and not a bg so it can be shown on top of other header items when necessary.
Ookami Kenran
April 5, 2021 21:26 (3 years ago)
Ah I didn't consider mobile as usual XP maybe it doesn't matter if the bunny is not visible on mobile.

I'm open to such suggestions but preferably keep the css as easy as possible for people who want to customize their profile (and keep existing event/personal themes working, though maybe we can throw that out of the window since tinyurl shut down)
Karin
April 6, 2021 13:48 (3 years ago)
Easter Logo
I just put the whole body in the original position; just to test and see how it would look. You can tell me if'/how you want it changed. I can probably at least flip his left arm up, like the original.

Default Logo
That was the main thing, I think it would be better if it was not a part of the unordered list (ul). The biggest hiccup will be that they will have to change the element selector, and that is already a hiccup for those updating old CSS.

Yellow Easter Theme Update/All other themes that haven't been updated yet
Would you like me to come up with the colors to use, or would you rather me keep the selectors here so you can use them to update yourself?
Ookami Kenran
May 5, 2021 22:29 (3 years ago)
There's even css to prevent overflowing with long words? Who knew, thanks! ^^
Karin
May 5, 2021 22:58 (3 years ago)
I really like the gradient in the highlighting of the current tab, very nice! *_*

I copied the easter theme, so you can take it off if you want. Great job! I hope we can rerelease that event next year.
Karin
May 15, 2021 19:12 (3 years ago)
I need to remember to remove this mother's day CSS...

~*~*~

I noticed that the x on the form version of the login area is very close to the top of the div, it doesn't match the logged in version.

On the note of the the back/logout button: I think it would be better as a capital, or better yet as, one of those (you use fa, right) icons. It's currently too small and not mobile friendly; it would also help to move it a smidg to the right so people who have rounded screens or bulky cases can access it easier.
Ookami Kenran
May 16, 2021 1:40 (3 years ago)
I might put my CSS related suggestions here (above), or would you rather me comment them in that one wiki...? (I need to find the link and maybe put it on my profile...)
Ookami Kenran
May 16, 2021 1:43 (3 years ago)
*This page.
Ookami Kenran
May 16, 2021 18:29 (3 years ago)
All is fine, if you just tell me where to look whenever you've got something.
Karin
May 18, 2021 20:30 (3 years ago)
/* first round...tell me if you think she will like it; I'm still adding stuff */
body {
background:url(https://image.f...6745-132.jpg);
background-attachment:fixed;
background-size:cover;
color:#68003B;
}

#header {
background:transparent;
background-image: repeating-linear-gradient( -45deg, #ff808080, #ffcc8080 10px, #ffff8080 40px, #80ff8080 60px, #8080ff80 80px, #cc80ff80 100px, #ff808080 120px);
border-bottom:2px ridge #AE336C;
}
#menu, #header ul.menu {
background-image:url(../../../img.php?logo=AE336C);
}

#header ul.menu a {
background:#FFFFFF80;
color:#68003B;
border:1px solid #68003B;
}
#header ul.menu a:hover {
background:#FFFFFFAB;
color:#AE336C;
border:1px solid #AE336C;
}
ul.menu a {
background:#FFFFFF80;
color:#68003B;
border:1px solid #AE336C;
}
ul.menu a:hover {
background:#FFFFFFAB;
color:#AE336C;
}

h1, h2, h3, h4 {
color:#AE336C;
}

.speechbox span a:link, .speechbox span a:visited, .speechbox span a:active {
color:#AE336C;
text-decoration: underline wavy #AE336C;
}
.speechbox span a:hover {
color:#68003B;
}
.speechbox span {
background:#FFFFFF80;
border-color:#AE336C;
}
.bubble_tail {
background-image:url(../../../img.php?bubble=F6F6F6&border=AE336C);
}
Ookami Kenran
May 18, 2021 22:04 (3 years ago)
Ok, I don't know if I went in a totally wrong direction or what, but let me know what she and you think. I know almost nothing about the show, only the one paragraph I read from Wikipedia, I think.
Ookami Kenran
May 19, 2021 21:11 (3 years ago)
You asked where I would like divs? Well, I would kinda like one around header and content. I would also like to help you redo the header, even if it stays looking the same for the time being.
Ookami Kenran
May 20, 2021 19:56 (3 years ago)
I think it should contain the cartoon characters XP
Karin
May 20, 2021 19:58 (3 years ago)
Maybe set this image as a fixed background:
Karin
May 21, 2021 15:31 (3 years ago)
I still need to make some edits so it's easier to legible, but I don't recommend this background... I tried to use the wings for the characters, and the pink/purple colors I'm using are from the logo.
Ookami Kenran
May 21, 2021 15:34 (3 years ago)
On her profile there will be bigger a version of the wings in the top right behind her avatar. ^w^ *hoping those wings are actually from the show*
Ookami Kenran
May 21, 2021 18:18 (3 years ago)
Ok, I did the best I could...
Ookami Kenran
May 21, 2021 18:22 (3 years ago)
As always, I kept the previous version; it's at the top. ^
Ookami Kenran
May 21, 2021 19:05 (3 years ago)
Ooh I'm sure she'll love this! I'll put it on her profile together somewhere this weekend, she's asleep now.
Karin
May 21, 2021 19:14 (3 years ago)
^^

I made it so she can see this page.
If you could, please let me know when you are done so I can put it pack to authors only and go back to what I had. <3
Ookami Kenran
May 21, 2021 19:27 (3 years ago)
I will!
Karin
May 22, 2021 12:13 (3 years ago)
I showed it to her and she liked it but she couldn't see your wiki listed under her account. Please don't do anything so I can fix this properly.
Karin
May 22, 2021 12:14 (3 years ago)
Oh wait she's not a site artist so maybe that's why and I don't have to fix anything after all :P
Karin
May 22, 2021 12:15 (3 years ago)
I made her an author... O.o
Ookami Kenran
May 23, 2021 17:45 (3 years ago)
When I added "Sasha", I thought it was weird at first that the wiki added "sasha" instead. I tried adding "Sasha" again, but nothing happened (I kinda wondered if it would remove "sasha")...I haven't tried removing "sasha" yet. I reckon you'll have to delete or change the name of one of the accounts so that more bugs/glitches like this don't arise.
Ookami Kenran
May 24, 2021 20:25 (3 years ago)
You misspelled her name... but I can't seem to remove the wrong sasha either, guess I need to fix that.
Karin
May 24, 2021 20:28 (3 years ago)
AHA!

Ugh...I'm so sorry... ^^;;;
Ookami Kenran
May 30, 2021 1:07 (3 years ago)
Found out the img thing at the top has a bug I'll have to fix...
Ookami Kenran
June 17, 2021 1:50 (3 years ago)
I don't dislike it at all, I just really only come online long enough to check what's new and leave is all. I have no idea when any of the dress up things are going to be made, if ever, so I just don't have a lot of opinion on the matter, but this layout is really cute <3
Alina_Mau
July 23, 2021 21:12 (3 years ago)
I like it but all text needs to be darker, for contrast/readability
Karin
July 24, 2021 20:02 (3 years ago)
Text text text link text
Ookami Kenran
November 20, 2021 15:21 (3 years ago)
Lol that's cute!
Karin
December 18, 2021 1:32 (2 years ago)
I love the little comic :OO
sensationings
December 18, 2021 2:43 (2 years ago)
Thanks!
Ookami Kenran
April 20, 2022 23:16 (2 years ago)
Easter Theme Updates
1.) Remove last three lines about #foreground-compensation.
2.) h4:
___a.) Add max-width: 800px; before margin.
___b.) Change margin to: 0 auto.
Ookami Kenran
April 20, 2022 23:27 (2 years ago)
3.) Add:
#content ul.menu a {
background:#C2E8E580;
color:#1084af;
}
#content ul.menu a:hover {
background:#C2E8E5;
color:#51c504;
}
Ookami Kenran