Skip to main content ↑ ↓
Crunchbang theme :) Started by JesusGod-Pope666.Info · · Read 3934 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Crunchbang theme :)

Well, I've started out on my journey on theming, I've started out on my first CSS file which I can't remember what was named and began editing it. So here is the progress for now, lots of things still needs fixing, so this is like version 0.1 :P
At least you get more aquinted with CSS but it takes a lot of time for sure and test, upload and fix.

The Website is on Paven666.dk/forum although I might be doing things if you go there so who knows what state it is in if you click!

It's really a gigantic job, I would think even if you knew CSS... So so many things, and lot of code just in that file alone that I'm playing around in. Well made a custom file out of it, as far as I can see. Anyway... I'll see if I can post a custom file at some point with just the changes, I've tried at least to copy the changes I make to another file for a smaller custom file overall... but it is not easy  :(

Anyway... back to work.

-edit-
By the way I found the issue with the besocial fixed menu, at least one way of fixing it! Not sure why the bottons are in 2 different catagories but one is dropdown menus and the others are not. And yet they should be leveled the same! Just hurts my eyes when they are not! ;) Anyway, changing 1px to 0px made it get in line. Not sure overall why one would give it 1px in any case - but it sorted it out.
Code: [Select]
#main_menu .listlevel1.subsections {
	top: 0px; /*fixes the level at the top bar!*/
}

Re: Crunchbang theme :)

Reply #1 –

So I got a little further with it, hours and hours... takes so long. But.... It's moving forward.

Well... I'm uncertain of a lot of things, but at least a lot better then when I started :P

I wish I had more brainpower to use, in any case... Moving forward. Have another idea as well - and then my own of cause. I don't know how far I'll get with it, as it takes a lot of effort, energy and hours.

I'm trying to have this custom file at the side, but - it grows and grows and maybe it is just easier to focus on one file overall. I havent tested my Crunchbang theme much on mobile, but on the computer it is progressing for sure.

One thing that really really annoys me with the default CSS - is that there are sometimes used wording for colors in placement of #ColorCode - as I use Gimp to find the color codes, to find it in the css code. Beside that the file is overall amazing with details.

One could actually make an easy color coding by putting the Stylesheet in an PHP file and connect it with some PHP values to easily change multiple factors in the CSS. If one could figure like 10 colors or whatever and prepare the theme for it, one could easily change colors on a theme. I'm thinking more on the newbies here, but it would also be powerful for others to just do little to get much. Like one could take besocial and prepare it, and let the user fix 10 varients of colors which would produce a result. Those varients would then go to the CSS to be produced in whatever colors the user chooses. Just an idea anyway as always, I'm full of ideas and no skill! :P

-edit-

I guess I need to get into the php to change some of the things at some point. Like I really don't understand the post before topics... And I guess one can mess around with things. Although I have no idea or experience with PHP, beside a little surface area. I use it primary on my website for a sorta hack to get html files from the outside into files. I used a javascript in the beginning and it was really just terrible, and someone pointed out I could use PHP, which was absolutly awesome as it worked much better. So I pretty much just use php for all my html files now.

And the other "hack" is in regards of Styling in a PHP, so you can change things with variants from the outside. :) My experienced friend figured it out, while me complaining and looking for something having an idea as usual. I'll fix a picture or 2 in regards of it. ups... can't do, maybe I'm in quick edit...
There we go, in theory you would quickly be able to change things with this :) although less control ofcause, but quick for the newbies and whoever just want some specific colors. I would think this would be possible and you would pretty much have a rainbow of colors at your desposal. Just need to find a good combination for var1, var2, var3, var4, var5, var6 and var7, and then go for it! Maybe you don't need that many, 7 might be enough. Actually had another idea. A Rainbow color theme with this system. 7 colors layed out, for anyone to easily choose there colors and in matters of minutes have a uniqued colored theme.

Go for it guys! :D Like why make a theme again and again with different colors if you can easily make it change its colors in mere seconds?

Re: Crunchbang theme :)

Reply #2 –

So the idea is to have
var1 = Red
var2 = Orange
var3 = Yellow
var4 = Green
var5 = Light blue, I guess Teal or something
var6 = Dark blue
var7 = Violet

#ff0000 #ff940d #e5ff00 #00ff00 #25c7ef #0000ff #ba00ff

And then put the Var's specific places in the theme to connect to them. So the CSS file is made into a PHP file and the styling is in it. I'm sure it can be connected pretty easily with the theme in some way overall. Then make an overall theme that works with 7 colors and voila - you have an easy changing theme for every kind of color variation a person wants with only a few things needed to be inserted :)
The Rainbow theme, starting out with the 7 Rainbow colors, and then let the user change them from there on. Maybe let a background use all 7 varients, so it looks like a rainbow in the background by default, dunno... I'm sure one can do a lot of things with just 7 variants.

Well... anyway just an idea, I should go to bed. See if I can get more done on the Crunchbang theme tomorrow.
Last Edit: October 15, 2020, 08:28:37 pm by Darkijah
Dearly Regards - Darkijah - May Jayshua the Anointed, God Almighty who died for the Sins of the world bless you with wholesome health and eyes to see!
Websites: https://JesusIsGodAlmighty.Life and https://Paven666.dk

Re: Crunchbang theme :)

Reply #3 –

By the way, I can't seem to get the RSS to change color. There is this code which I would think is the thing that should work. the background is indeed changed by the RSS but the orange still stays orange even if I put an !important on another color.

#footer_section .rssfeeds { background-color: #bebebe;
   background-color: #bebebe;
   color: orange;
   text-shadow: 1px 1px 0 #000000;
}

So not sure if this is an error or what? Does not seem to be an image as the background does seem to work changing its colors. But the orange thing does not seem to do anything, which I would think would be for the orange seen in the icon. Yet... well... nothing. Just a minor thing.

Hmm, I just checked my page with the Crunchbang theme from my mobile, it does indeed look pretty good but there is absolut more holes in the mobile version. Need to fix those icons as well, way to big borders. Well... Get to bed, NOW!

Re: Crunchbang theme :)

Reply #4 –

Got it to work on the forum from Chrome with this Stylus thing... So now I'm sitting on the main forum with the theming which is pretty nice so one can see any issues with it and actually use it some place where there is some action :P

Okay, some issues for sure... not unexpected :) Like the main message writer having some issues with the letter colors Which is kinda important.

Re: Crunchbang theme :)

Reply #5 –

If anyone wanna try it out in the Stylus or something - this is the custom small file. It should have every change although I might have forgotten something or something might not work. But overall it seemed to do the same as the whole big file I first imported :) - this is much smaller. Still lots of bugs, in some sense. I'm not sure of the layout of the colors, and what is possible overall - but maybe I just give this a rest and begin again on something else to sharpen my furthering understanding getting used to it all.

There was yet another Theme I wanted to try to make called... well... good question, my memory does not serve me. In any case, this Crunchbang seems to work pretty good already. Well... far from done but... It's usable at least. If you just keep the mouse inside the writing box so it turns White, Ha ha ha. Yea, need to find that pointer somewhere to make it white.

-edit- code update somewhat, just some minor issues.
Code: [Select]

#menu_nav, #adm_submenus .active, .admin_menu .active, #adm_submenus .active {
	background: #191c1e; 	
        background-image: linear-gradient(to bottom, #191c1e 0%, #191c1e 49%, #191c1e 51%, #191c1e 100%);
}

html {background: #2e3436;} /* border-radius: 0px; */

body{background:#2e3436;color: #bfbfbf;}

#menu_nav {background: #171b1d;}

#footer_section { background-color: #2e3436; color: #999999;}

.description, .information, .warningbox, .successbox, .infobox, .errorbox {background: #2e3436;}

.forumposts, .profile_content {background: #2e3436;}

.forumposts:nth-of-type(even) {background: #2e3436; margin-top: 0px;}

.forumposts:nth-of-type(odd) {background: #292f30; margin-top: 0px;}

#forumposts .category_header, .content_category .category_header {border: 1px solid #3b4245; background: #2e3436; border-radius: 0px; /* added */}

input, button, select, textarea, .editor {border: solid #76715e; border-radius: 0px; background: #272822; color: #f8f8f2;}

#footer_section a {color: #dfdfdf;} /*underline og hvidt lys!*/

#wrapper { background: #32383b; border: solid #3b4245}

#news {background-color: #191c1e; border-color: #3b4245; /*2e3436*/} /*solid? */

#news > h2 {color: #bfbfbf;}

#news_line, #elkFadeScroller {color: #bfbfbf;}

#top_section .wrapper {border-right: #3b4245; border-left: #3b4245; background-color: #2e3436;}

.category_header, .forum_category .category_header {background:#292f30; color:#bfbfbf; margin-bottom: 0px;
border-radius: 0px; border-color: #3b4245; text-shadow: none;}

::-moz-selection {background:#191c1e; color: #bfbfbf;}

#menu_nav .listlevel1.subsections>a:before { color: #bfbfbf; margin: 1px 0 0 3px;
	float: right;}

#forumtitle {text-shadow: 0px 0px 0px #d8d8d8;}
#forumtitle > a {color: #d8d8d8;}

.board_name > a {color: #ffffff;}

.topic_name h4 a {color: #ffffff;
}

/* Normal, standard links. */
a, a:link, a:visited,
/* Links that open in a new window. */
a.new_win:link, a.new_win:visited {color: #ffffff;}


#main_menu .linklevel1, .admin_menu .linklevel1, #adm_submenus .linklevel1 {color: #bfbfbf;}

#menu_nav{color:#3b4245;}

.navigate_section {border: 1px solid #3b4245;}

.linktree:not(:last-child):after { background-image: linear-gradient(45deg, #32383b 0%, #32383b 50%, #bfbfbf 50%, #bfbfbf 100%); }


.board_row, .childboard_row {border-bottom: 1px solid #3b4245; border-right: 1px solid #3b4245; /* added */
border-left: 1px solid #3b4245; /* added */ }


.topic_listing li {border-top: 1px solid #3b4245;border-bottom: 1px solid #3b4245;
border-right: 1px solid #3b4245; /*added*/ border-left: 1px solid #3b4245; /*added*/}


#sort_by {border: 1px solid #3b4245;}

.content {border-color: #3b4245;}

#footer_section .rssfeeds { background-color: #bebebe;} /* color: orange; not working changing it */

#searchform {background: #191c1e;}

.category_header a:link, .category_header a:visited {color: #bfbfbf;}

.post_wrapper {border:1px solid #3b4245; border-radius: 0px;}


.linklevel1, .linklevel1:link, .linklevel1:visited {
	border: solid #2e3436;
	border-radius: 0px;
        background: #191c1e;
	background-image: none;
	box-shadow: none;
	color: #bfbfbf;
        font-size: 1em;
}

.linklevel1:hover, .listlevel1:hover .linklevel1,
.linklevel2:hover, .listlevel2:hover .linklevel2,
.linklevel3:hover, .listlevel3:hover .linklevel3,
#menu_sidebar .linklevel1:hover, #menu_sidebar .listlevel1:hover .linklevel1,
#menu_current_area > strong > .linklevel1 {border-color:#2e3436;background: #000000;
box-shadow: none; color: #ffffff;}


#main_menu .listlevel1.subsections {
	top: 0px; /*fixes the level at the top bar!*/
}


#main_menu .linklevel1, #main_menu .linklevel1:link, #main_menu .linklevel1:visited {
        border-right: 1px solid #2e3436;
        border-radius: 0px;
	background-color: #191c1e;
	background-image: none;
	box-shadow: none;
}

.poster .listlevel1 a.linklevel1 {color:#ffffff;}

.poster li.poster_online:hover .linklevel1 {border-color: transparent; background: none; 
box-shadow: none; color: #ffffff;  text-decoration: underline;}


.poster li.subsections.listlevel1:hover .linklevel1 {border-color: transparent;
background: none; text-decoration: underline;
}

.poster .listlevel1:hover .linklevel1 {  border-bottom: 1px solid #FFFFFF;}

.poster .subsections > a:after, .poster .subsections:hover > .name.linklevel1:after {
	margin: 0 0 0 5px;
	color: #FFFFFF;}

.admin_menu .linklevel1, #adm_submenus .linklevel1 {
	color: #ffffff;
}

/* Override link colour for admin/profile/etc menus. */
.admin_menu .linklevel1, #adm_submenus .linklevel1 {
	color: #ffffff;
        background: #2e3436;
        border: #3b4245 dotted;
}


/* For primary admin/profile/etc drop menus. */
.admin_menu .linklevel1:hover, .admin_menu .linklevel1:focus,
/* For secondary admin/profile/etc menus. */
#adm_submenus .linklevel1:hover, #adm_submenus .linklevel1:focus {
	color: #ffffff;
	text-decoration: none;
        background: #292f30;
        border: #3b4245 dotted;
}

/* Main menu Level 1 active button and hover need a different border. */
#main_menu .active, #main_menu .linklevel1:hover, #main_menu .listlevel1:hover .linklevel1, #main_menu .linklevel1:focus {
background: #000000;
color: #FFFFFF;
}

/* Common button styling. */
input[type="submit"], .drop_area_fileselect_text, button[type="submit"], input[type="button"],
/* Anchors styled to look like buttons. */
/* These have standard body text size. Can be chained with smalltext class. */
.linkbutton:link, .linkbutton_right:link, .linkbutton_left:link,
.linkbutton:visited, .linkbutton_right:visited, .linkbutton_left:visited {
	border: 1px solid #2e3436;
	border-radius: 0px;
	background: #191c1e;
	background-image: none;
	box-shadow: none;
	color: #bfbfbf;
}

/* Hover effects. */
input[type="submit"]:hover, button[type="submit"]:hover, input[type="button"]:hover,
.linkbutton:hover, .linkbutton_right:hover, .linkbutton_left:hover {
	border: 1px solid #2e3436;
	background: #000000;
	box-shadow: none;
	color: #FFFFFF;}

/* Levels 2 and 3: drop menu wrapper. */
.menulevel2, .menulevel3 {
	border: 1px solid #3b4245;
	border-radius: 0px;
	background: #191c1e;
	box-shadow: none;
}

/* Level 1 active buttons for primary admin/profile/etc drop menus... */
.admin_menu .active,
/* ......and for secondary admin/profile/etc menu strip. */
#adm_submenus .active {
	border: #3b4245 dotted;
	background: #292f30;
	background-image: none;
	color: #FFFFFF;
}

/* Hover effects for those buttons. */
.admin_menu .active:hover, .admin_menu .listlevel1:hover .active, #adm_submenus .active:hover {
	border: #3b4245 dotted;
	background: #292f30;
	background-image: none;
	color: #FFFFFF;
}


/* Levels 2 and 3: hover effects. */
.listlevel2:hover .linklevel2, /* < highlighted with cursor over level 3. */
.linklevel2:hover, .linklevel2:focus, .linklevel2.sfhover:focus,
.linklevel3:hover, .linklevel3:focus, .linklevel3.sfhover:focus {
	background: #000000;
	color: #FFFFFF;
	text-decoration: none;
}


.linklevel2:link, .linklevel2:visited, .linklevel3:link, .linklevel3:visited {
	border: 1px solid #2e3436;
}


.pagelinks .navPages {
	margin: 0 0px;
	color: #FFFFFF;
        border-radius: 0px;
}

.pagelinks .navPages:hover {
	background: none;
        border-color: #32383b;
	color: #FFFFFF;
	text-decoration: underline;
}

.pagelinks .current_page {
    background: none;
	color: #4c5659;
	text-decoration: none;
        border-radius: 0px;   
}

textarea:hover, .editor:hover {
	color: #f8f8f2;
}


input, button, select, textarea, .editor {
	border: 1px solid #3b4245;
	border-radius: 0px;
	background: #272822;
	color: #f8f8f2;
}

.bbc_link:link, .bbc_link:visited { color: #FFFFFF;}
                                    
.bbc_link:hover { color: #FFFFFF;}                                    

::selection {background: #191c1e; color: #bfbfbf;}





/* not in Index */
.sceditor-container iframe, .sceditor-container textarea {
    color:#FFFFFF;}     

Re: Crunchbang theme :)

Reply #6 –

Quoteindeed changed by the RSS but the orange still stays orange even if I put an !important on another color.
If you are referring to the RSS icon, thats one of the svg icons and would be defined in the icons_svg.css file.  Look for a .i-rss::before definition and change the hex code in the fill statement.

Re: Crunchbang theme :)

Reply #7 –

Quote from: Spuds –
Quoteindeed changed by the RSS but the orange still stays orange even if I put an !important on another color.
If you are referring to the RSS icon, thats one of the svg icons and would be defined in the icons_svg.css file.  Look for a .i-rss::before definition and change the hex code in the fill statement.

Thanks, I'll see if I can find it :)