ElkArte Community

Extending Elk => Custom Themes => Topic started by: TE on February 28, 2014, 12:10:44 pm

Title: [custom.css] Curved Elk
Post by: TE on February 28, 2014, 12:10:44 pm
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)
Title: Re: [custom.css] Curved Elk
Post by: Allan on February 28, 2014, 12:30:59 pm
Looks great, but why the curve theme  :-X
Title: Re: [custom.css] Curved Elk
Post by: Antechinus on February 28, 2014, 02:26:20 pm
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"?
Title: Re: [custom.css] Curved Elk
Post by: TE on February 28, 2014, 02:43:23 pm
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;
}
Title: Re: [custom.css] Curved Elk
Post by: Antechinus on February 28, 2014, 02:52:03 pm
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.
Title: Re: [custom.css] Curved Elk
Post by: TE on February 28, 2014, 03:04:13 pm
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.
Title: Re: [custom.css] Curved Elk
Post by: Antechinus on February 28, 2014, 03:17:04 pm
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.
Title: Re: [custom.css] Curved Elk
Post by: Spuds on February 28, 2014, 06:02:29 pm
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 !
Title: Re: [custom.css] Curved Elk
Post by: NetFlag on March 12, 2014, 09:21:10 am
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?
Title: Re: [custom.css] Curved Elk
Post by: TE on March 12, 2014, 09:40:48 am
Quote from: NetFlag – This means the icon comes from outside with an base64 encrypted URL?
Nope, it's a base64 encoded, embedded Image..
Title: Re: [custom.css] Curved Elk
Post by: NetFlag on March 13, 2014, 06:50:36 am
Interesting thing. Its easy to generate string via shell (Debian with openssl). Now im going to play a little bit with.  :)
Title: Re: [custom.css] Curved Elk
Post by: emanuele on March 18, 2014, 05:26:32 am
I forgot to say that I like it! :D (Well, as much as I like Curve! :P)
Title: Re: [custom.css] Curved Elk
Post by: forumsearch0r on August 24, 2014, 07:04:12 pm
Hmm. That Curved reminds me of something.
Title: Re: [custom.css] Curved Elk
Post by: overscan on October 14, 2014, 03:45:43 am
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.
Title: Re: [custom.css] Curved Elk
Post by: ahrasis on October 14, 2014, 08:34:21 am
It's ok I guess.  I don't really like the curve theme. Though I like the curve thing.
Title: Re: [custom.css] Curved Elk
Post by: emanuele on October 14, 2014, 09:04:02 am
How the menu doesn't work?
Menu looks good here as well, is there anything in particular that doesn't behave as expected for you?
Maybe a screenshot would help. ;)
Title: Re: [custom.css] Curved Elk
Post by: overscan on October 15, 2014, 06:20:48 am
The menu at the top of the page (community, admin, messages) has lost its dropdown menus, like I said. Arrows are there but no dropdown appears.
 
Title: Re: [custom.css] Curved Elk
Post by: emanuele on October 15, 2014, 10:55:17 am
Could it be you enabled the "click-to-open"?
Because here on my localhost works fine... though I was able to test it only on a 1.0 version, not a 1.0.1... I have a bit of a messy setup.
Title: Re: [custom.css] Curved Elk
Post by: TE on October 16, 2014, 12:58:31 am
menues are broken, confirmed.. I'll update the file soon.

Edit: Attached a new version, see below.. :)
Title: Re: [custom.css] Curved Elk
Post by: meetdilip on October 17, 2014, 07:13:35 am
Nice to have another option. Good work @TE