Hi. I’m hitting a number of impasses when creating what I consider to be a very simple design. The site will consist of six pages plus home. On the home page I want six centrally placed colored panels that abut. Each panel needs to contain a heading for each page with a brief descriptive sentence underneath. The text needs to be editable via a cms, and I want each panel to be a link to another page, with if possible a roll-over transition. If I create the panels with a normal div block I can’t make them clickable. If I make them with a link block I hit problems with formatting the text - in particular the text acquires a default underline that proves impossible(?) to remove. The remove text decoration toggle has no effect. Buttons don’t give me enough text options and the nav widget is not right for this. Please have a look at what I’ve got so far (so you’ll get the design idea) and if possible give me some hints to the simple solution I am surely missing.
I think I may also have problems getting these panels to reflow nicely in smaller devices - they need to be underneath one another in the portrait mobile - I guess I just remove the float at that size? But what if the intermediate size needs a two across by three down layout?
If you want to make those buttons links, you have to drop a Link Block instead of a div block. By default the browser creates blue links. To override these styles give your link block a class and add text color and add text underline none.
Important: Make sure you are selecting the Link Block and removing the underline from there, not the text inside - because the underline is coming from the link block (the <a> that’s giving it that style).
Then you will be able to add hover states like you want.
To make the blocks the same size in tablet, just set a Min-height on the link block class so they are all the same height.
Hi
Yep this should help a lot; I’m mid-way through doing this change so I can’t give you the total thumbs up, but it’s looking good so far.
But conceptually I’m a little confused about the css hierarchy here. I thought the css would cascade down until it is overridden by something else. That’s the way it appears to work for instance with my font style and size for the headings I insert into the link block. I use a class applied to the heading, why then does this same principle NOT apply to the text decoration control; and you have to go back to the Link Block to style that.
I’ve done it; and it works but it seems counter to the overall logic?? I don’t necessarily expect an answer to that. That’s the way it is I guess. I suppose the answer if I hit similar problems is to follow the trail backwards through the hierarchy, trying things until it works?
It should. You probably messed up in tablet and lower views. If there is a blue text click on it and select Remove Style. It will inherit style from parent item.
Hey @john , unfortunately that’s just how CSS is created to work with links. The underline has to be removed from the <a> element if you have other text elements inside. The underline is a typography style which cascades down to its children. Not sure why CSS doesn’t let you override the underline with the more specific classes.
