Skip to main content

Topic: [custom.css] Curved Elk (Read 2906 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.
  • TE
  • [*][*][*][*][*]
  • Global Moderator
[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)
Thorsten "TE" Eurich
------------------------

  • Allan
  • [*][*][*][*]
Re: [custom.css] Curved Elk
Reply #1
Looks great, but why the curve theme  :-X

  • Antechinus
  • [*][*][*][*][*]
Re: [custom.css] Curved Elk
Reply #2
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

  • TE
  • [*][*][*][*][*]
  • Global Moderator
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
------------------------

  • Antechinus
  • [*][*][*][*][*]
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

  • TE
  • [*][*][*][*][*]
  • Global Moderator
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, 09:21:50 pm by TE
Thorsten "TE" Eurich
------------------------

  • Antechinus
  • [*][*][*][*][*]
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

  • Spuds
  • [*][*][*][*][*]
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 !
"Ever tried. Ever failed. No matter. Try again. Fail again. Fail better" - Samuel Beckett

  • NetFlag
  • [*][*]
Re: [custom.css] Curved Elk
Reply #8
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?

  • TE
  • [*][*][*][*][*]
  • Global Moderator
Re: [custom.css] Curved Elk
Reply #9
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, 06:05:26 pm by Spuds
Thorsten "TE" Eurich
------------------------

  • NetFlag
  • [*][*]
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.  :)

  • emanuele
  • [*][*][*][*][*]
  • Global Moderator
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.
-

  • overscan
  • [*][*]
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.

  • ahrasis
  • [*][*][*][*][*]
  • Global Moderator
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.