HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Thoughts on buttons

Login / Search

 [ Join | More ]
 Add topic 
Posted
Item has a rating of 5 (Liked by EnneaLiked by Guest)  
Rating:
#100766 (In Topic #19778)
Avatar

Hi all,

I am considering the idea of having our page/pageitem buttons all redone using CSS rendering with a single icon placed on them. This is instead of having the whole button being an image, with text on there.

The advantages are:
  • No messing with PSD files to do translations
  • Very slight reduction in page size
  • Consistent font style
  • Consistent look to other page buttons, e.g. at the bottom of ocPortal forms

The disadvantages are:
  • Not quite as pretty
  • Icons would be a regular size, so for example the 'Next' icon wouldn't have the fancy sweeping arrow blended throughout it
  • A small amount of rocking the boat, from a themeing perspective (I don't think it'll break anything actually)
  • I have to get our designer to re do things ;).

What are your thoughts on all this?

It is pretty rare nowadays for software to go with PSD-derived buttons because they are a bit of a pain, but at the same time they do look a bit nicer.

I am verging on having the change made.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#100781
Avatar

Community saint

You’re building for the future and css3 buttons are the way to go by all accounts.

However, not all these beautiful icons need to be completely discarded as apparently some of their transparent elements could still be added to a button css code. I've seen tutorials taking into account  that background gradient uses the image property, so by adding a span around the text, it is possible to show an icon within the css button. I can certainly envision this as a way to still use the fancy sweeping arrow blended throughout the css button as finding the middle ground maybe!;)

Jean
Back to the top
 
Posted
Rating:
#100795
Avatar

Community saint

As a producer of different coloured buttons for various themes, I can attest to the 'extra' work required. But if a template for the new buttons is built, it all becomes relatively easy.

HOWEVER

I am VERY partial towards going the CSS route, and since I've built some CSS buttons using gradients, etc., I think it really is the way to go.

But, you may consider making them (the buttons) a stand-alone  'css' file, albeit the file will still need to be loaded each time one fires up ocP. The reason I'd like them to be separated into their own file is that it would make it easier to find, identify and edit them in their own CSS file/folder!

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Item has a rating of 5 (Liked by Guest)  
Rating:
#100797
Avatar

If we're going to do this, I am very inclined to keep it simple. I don't want to have to have separate CSS rules for different buttons, so we'd do it really uniformly, on top of what we already do for CSS buttons. Last thing ocPortal needs is more code ;).

We can redesign particular buttons as required to make sure they all look good within the particular design constraint.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#100821
Avatar

Community saint

Would there could there be an easy way to have the option of both (meaning themers choice of either with ease)? I like the idea of css but I also like the prettier too.
Back to the top
 
Posted
Item has a rating of 5 (Liked by Robbie GoacherLiked by JeanLiked by GuestLiked by KingBastLiked by Ennea)  
Rating:
#100823
Avatar

I really don't want ocPortal to include multiple implementations of the same thing. The only way a product as large as ocPortal can sustain itself is by having a single streamlined implementation for everything.

My words "Not quite as pretty" were not particularly well chosen. It's more to do with subjectivity held by people used to the current buttons – I don't think anyone would be able to objectively say that one way of doing the buttons was better. One could certainly argue that use of a consistent font, and consistent button rendering with the forms, made it more attractive than before.

With v10 we're 80% the way doing a major refresh of the icons with a view to:
  • adding a lot more of them
  • standardising on 24x24
  • supporting high-dpi screens, e.g. Apple's retina screens (so, 48x48 versions also)

This screenshot should give an impression for what we want to do. This is from a mockup of a new version of the "Add image" (Galleries) form. It now contains icons, similar to the old full button images.

So essentially it is a unification, that means:
  • more consistency between parts of ocPortal
  • nicer looking forms
  • a larger set of 24x24 icons in the overall pool (297 at current count; very useful for themeing, to have so many available)
  • less bandwidth
  • easier themeing


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#100831
Avatar

Community saint

Although I do prefer the look of the current buttons in general, the highlights can make the buttons stand out a bit too much sometimes, especially on dark themes, so the new flatter look might be better overall.

CSS buttons definitely have their benefits, but the main thing I would be hesitant about would be how well they look when rendered in the different browser and on different platforms, especially mobile.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#100837
Avatar

CSS buttons definitely have their benefits, but the main thing I would be hesitant about would be how well they look when rendered in the different browser and on different platforms, especially mobile.

I don't think that's an issue. I think IE8 is the last platform to not do the relevant aspects of CSS3 well, and IE11 is just out. You can see this on ocPortal already actually – the buttons look okay on IE8, just aren't quite as fancy.

Mobile platforms tend to have great browsers, in terms of CSS anyway.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#100839
Avatar

Community saint

Chris Graham said

I don't think that's an issue. I think IE8 is the last platform to not do the relevant aspects of CSS3 well
I haven't been keeping up with the state of CSS compatibility since I stopped doing HTML development in my day job years ago, so that's good to know :thumbs: .

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Item has a rating of 5 (Liked by Guest)  
Rating:
#101049
Avatar

Fan in action

I like this idea a lot.

The buttons that come with the software are nice and looks like a lot of work went into them, but there are a lot to redo if you want something different. I know they are automatically colored by the seed when you generate a theme - but let's say my seed color is purple and I want the buttons to be an icy blue or cool green…I have to redo each one separately then.

At least, if its done with CSS, a color change can be applied to all of them in seconds and through that, other effects (like gradients and shadows) can be added.

So yeah…  :thumbs:
Back to the top
 
Posted
Item has a rating of 5 (Liked by Ennea)  
Rating:
#101863

Non-joined user

Everyone's arguments in favour of CSS themeable buttons make total sense to me. And personally, I'd be overjoyed, restyling mine the moment the changeover came about.

CSS please, please, please…!
Back to the top
 
Posted
Rating:
#101864
Avatar

Honoured member

Personally moving over to CSS buttons makes sense to me.

The example buttons you've listed chris look fine and if it reduces page size and makes trasnaltion easier even in small terms. Both are tangible benefits and as others have said i think CSS buttons are the way forward.

Just Jarv
Back to the top
 
Posted
Rating:
#102342
Avatar

Community saint

I just want to throw my vote behind CSS buttons. I love me some CSS, especially since I can't draw worth crap!

I do hope that the CSS buttons won't be so stubborn to take my color choice! My current theme I'm working on oddly wants white borders and buttons, but I want bronze. So I've been going through changing those, and sometimes I really have to pull out some CSS tricks to make the changes be accepted…

But still, CSS buttons all the way! Every button, every time.

Legends of Nor'Ova: A site powered by ocPortal; home of the Legends of Nor'Ova tabletop RPG wiki and community.

Like ocPortal? Want to thank Chris and gang somehow? Then help out in the chat room! It really needs your help! Just open it in a tab everytime you open your web browser, and when you hear a "ding", check it out!

"Those who want help should first be willing to give help."
Back to the top
 
Posted
Rating:
#102394
Avatar

Honoured member

mythus said

I just want to throw my vote behind CSS buttons. I love me some CSS, especially since I can't draw worth crap!



Heh I know that feeling i can't draw either

Just Jarv
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: