Skip to main content ↑ ↓
[custom.css] Curved Elk Started by TE · · Read 20967 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

[custom.css] Curved Elk

yet another custom css, this time a "curved Elk"  ;)
the related css  (for the Be Social! variant) is attached. Another nice litte trick:  the images for the board icons are part of the CSS. (Thanks @Spuds for this wonderful idea)

Re: [custom.css] Curved Elk

Reply #1 –

Looks great, but why the curve theme  :-X

Re: [custom.css] Curved Elk

Reply #2 –

Quote from: TE – yet another custom css, this time a "curved Elk"  ;)
the related css  (for the Be Social! variant) is attached. Another nice litte trick:  the images for the board icons are part of the CSS. (Thanks @Spuds for this wonderful idea)
Eh? Wotcha mean "images are part of the CSS"?
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: [custom.css] Curved Elk

Reply #3 –

Directly embedded in the CSS, example from the file:
Code: [Select]
.off_board {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAApCAYAAABZa1t7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAq5JREFUeNrMmM1u2kAQx9ch1FBARgVKK75xKtReOES9oT5CH6EPwYNw5RFQVYlzD1iiB05VK4GiCCRsvl1AHOJAEyoB7gzCKE0cvoLr/UvDAovNTzOzM7tmVFUlNOoUXzKZjFH3Z8Beg8l6k+l0ejPYkfUSjAeLMQzD+/1+0u/3v8Pnr3t77IlygcU1GK/X+zwajZJwOEyCwSCxWCwkm82+n06n32D+1kgwFiyiwTidzheRSIRoMHa7/cEFOFetVhH84phgzAoELcaybAg9ocG43e6tNwgEAggWPgaYD+wMYSBP3oRCoWVYcMQ/2VfxeJwIgnB2aI6hR85x9Hg8zlgstoaxWq1PS0KXi3AgRVHQvVf7gLnhuk+pVGoJ43A4jr5UMezlchnz7Mcuvz9ZjepisSCJRMIQKBR6HnN031Aq4/EYjUO366lYLD4TRdE3n8+5Q8BWHeYd2EL77l5hv4SCW9XLsbokSefJZFL3xlAkfRCOPph4UAtgGBWicQ1vvXrzpVLpA4D+BrjOfbBWt9t9FAw8xULNIjzPK0aE2mazaTXynxxDSa1Wi5jZ1GHVnuqB3ULb+DUcDk0Dm81mJ3pga6/RoAdg7XabSrCuLMvoUurAgGkm9Xo96sBQzU6nQyWY2Gg0qAQbjEYjAqWDOjCosepFs9mkDgzVNnsBPAaGDZ1KMNwCXUHvog5suTrNzLNNYA0z69kmsCb2TbO2QZvAcBskDwYD6sCW4TRrt7ENzLQFsA2sB4cQU7ZB28BwGyTCIYU6MNTPSqVCJpMJYVn2+n+B7fK0p1qv17/A+BaOWD6aPLaEwzZFWyhNEbOtst95vvCK47iPqxOzEYddks/nPxcKBWXXHFs/voCLc4IgeGBkjw1Wq9VuRFH8s0/y39U4l8vdGJgCc+3NXwEGAGpxEUodIFRtAAAAAElFTkSuQmCC) !important;
}
Thorsten "TE" Eurich
------------------------

Re: [custom.css] Curved Elk

Reply #4 –

Yeah I just spotted that somewhere else. WTF is it? Why is it there? Do you want to make theming more difficult and incomprehensible? Just after a quick look at the way the number of files has increased, that sure seems to be the aim, even without stuff like this.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P
 

Re: [custom.css] Curved Elk

Reply #5 –

is it complicated to use your own images? just replace that with your own code:
Code: [Select]
.off_board {
	background-image: url(myimage.png);
}
I personally think it's easier than using sprites with postion.
Last Edit: February 28, 2014, 03:21:50 pm by TE
Thorsten "TE" Eurich
------------------------

Re: [custom.css] Curved Elk

Reply #6 –

The problem is that the code you are giving people is meaningless to them. They will have no way of telling what it relates to, because there's no image that can see with their own eyes, and no image name tied to anything. So, all you have done is to make the default code incomprehensible, which I cannot think of as a good thing.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: [custom.css] Curved Elk

Reply #7 –

I like using data uri's to embed the images for some areas, the biggest reason is it saves HTTP Requests.  Where we have used them the data string is most times smaller than even a header response   They are supported in ie8+ as well. 

For example take a look at all those editor buttons, yup data URI's vs almost 30 additional HTTP requests.

I find them easier than sprites myself, but like anything they are just another tool we can use. I personally don't see it as confusing, it is still a background image, just data instead of some image name.  If we think its confusing to anyone, we can use a comment that says this is a data uri of someimage.png

@TE awesome job on the curve look !

Re: [custom.css] Curved Elk

Reply #8 –

Quote from: TE – Directly embedded in the CSS, example from the file:
Code: [Select]
.off_board {
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAApCAYAAABZa1t7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAq5JREFUeNrMmM1u2kAQx9ch1FBARgVKK75xKtReOES9oT5CH6EPwYNw5RFQVYlzD1iiB05VK4GiCCRsvl1AHOJAEyoB7gzCKE0cvoLr/UvDAovNTzOzM7tmVFUlNOoUXzKZjFH3Z8Beg8l6k+l0ejPYkfUSjAeLMQzD+/1+0u/3v8Pnr3t77IlygcU1GK/X+zwajZJwOEyCwSCxWCwkm82+n06n32D+1kgwFiyiwTidzheRSIRoMHa7/cEFOFetVhH84phgzAoELcaybAg9ocG43e6tNwgEAggWPgaYD+wMYSBP3oRCoWVYcMQ/2VfxeJwIgnB2aI6hR85x9Hg8zlgstoaxWq1PS0KXi3AgRVHQvVf7gLnhuk+pVGoJ43A4jr5UMezlchnz7Mcuvz9ZjepisSCJRMIQKBR6HnN031Aq4/EYjUO366lYLD4TRdE3n8+5Q8BWHeYd2EL77l5hv4SCW9XLsbokSefJZFL3xlAkfRCOPph4UAtgGBWicQ1vvXrzpVLpA4D+BrjOfbBWt9t9FAw8xULNIjzPK0aE2mazaTXynxxDSa1Wi5jZ1GHVnuqB3ULb+DUcDk0Dm81mJ3pga6/RoAdg7XabSrCuLMvoUurAgGkm9Xo96sBQzU6nQyWY2Gg0qAQbjEYjAqWDOjCosepFs9mkDgzVNnsBPAaGDZ1KMNwCXUHvog5suTrNzLNNYA0z69kmsCb2TbO2QZvAcBskDwYD6sCW4TRrt7ENzLQFsA2sB4cQU7ZB28BwGyTCIYU6MNTPSqVCJpMJYVn2+n+B7fK0p1qv17/A+BaOWD6aPLaEwzZFWyhNEbOtst95vvCK47iPqxOzEYddks/nPxcKBWXXHFs/voCLc4IgeGBkjw1Wq9VuRFH8s0/y39U4l8vdGJgCc+3NXwEGAGpxEUodIFRtAAAAAElFTkSuQmCC) !important;
}

This means the icon comes from outside with an base64 encrypted URL?

Re: [custom.css] Curved Elk

Reply #9 –

Quote from: NetFlag – This means the icon comes from outside with an base64 encrypted URL?
Nope, it's a base64 encoded, embedded Image..
Last Edit: March 12, 2014, 01:05:26 pm by Spuds
Thorsten "TE" Eurich
------------------------

Re: [custom.css] Curved Elk

Reply #10 –

Interesting thing. Its easy to generate string via shell (Debian with openssl). Now im going to play a little bit with.  :)

Re: [custom.css] Curved Elk

Reply #11 –

I forgot to say that I like it! :D (Well, as much as I like Curve! :P)
Bugs creator.
Features destroyer.
Template killer.

Re: [custom.css] Curved Elk

Reply #12 –

Hmm. That Curved reminds me of something.
-

Re: [custom.css] Curved Elk

Reply #13 –

My SMF forum http://www.secretprojects.co.uk/forum/index.php used a lightly modified Curve theme.

This looks like an interesting starting point for creating a new theme roughly similar to the SMF forum look - however it doesn't seem to work correctly with Elkarte 1.0.1.  Specifically the menu dropdowns - don't.

Re: [custom.css] Curved Elk

Reply #14 –

It's ok I guess.  I don't really like the curve theme. Though I like the curve thing.