A Totally Unofficial CSS Help & Tips FAQ

HurstGM · December 2013

@ killervp - Thanks glad to be back and getting my gaming life back in order. Blame the fiancee for my continued coding for now. Ill admit my jury is still out but she has pushed me more back in the door.

Now back to CSS and pulling my hair out

HurstGM · December 2013

so another css question (Bear with me ive been doing css for exactly 2 days.) Is it even possible to remove the big white block designated for stuff? or is that stuck there? I know I can cover it so thats an option too. Still goofing off with several of the features but it seems to be coming together

madartiste · December 2013

Hurst, maybe I missed it, but could you elaborate on what exactly the "big white block designated for stuff" is? In general, if you can find the right selectors, all you need is display:none to get rid of something. If you need it to continue taking up the same space it normally does, you can also use visibility:hidden.

HurstGM · December 2013

Sweet I'll try that on my own and then post the results I think the hidden then will work I jut have to find the object name

HurstGM · December 2013

Here is what I came up with for my new game. Im still tweeking but I think it looks pretty good so far! Some is borrowed/shamelessly stolen from others. Some I wrote myself. Let me know what you think

The call:"https://the-call.obsidianportal.com/"

/MAKE REFORGE DISAPPEAR/
div.front-nav-container {z-index: -100 !important;}
div#sidebar {z-index: -100 !important;}
.flame-dragon {z-index: -100; height:15px;}
.campaign-public-title-container {z-index: -100 !important; height:15px !important;}

/* default link behavior */
a:link {color:blue;text-decoration:none;}
a:visited {color:purple;text-decoration:none;}
a:hover {color:orange;text-decoration:underline;}
a:active {color:red;text-decoration:none;}

/* how links to pages that don’t exist yet look */
a:link.create-wiki-page-link {color:red;text-decoration:underline;}
a:visited.create-wiki-page-link {color:red;text-decoration:underline;}
a:hover.create-wiki-page-link {color:red;text-decoration:underline;}
a:active.create-wiki-page-link {color:darkred;text-decoration:underline;}

/*Hide players avatars*/
.user-container {display:none;}

/*The Call Code*/
.highlight-container {width:1060px;}
.wiki-page-container {width:1060px;}
.large-3 columns sidebar {display:none;}
.sidebar-last-updated {display:none;}
.sidebar-see-all-wiki-pages {display:none;}
.post-section.post-main {width:1060px;height:631px;}
.header-icon {visibility:hidden;}
.wiki-page-name {visibility:hidden;}
.wiki-page-name.title {visibility:hidden;}

HurstGM · December 2013

Blarg homepage forgot it was different. Here are the additions to that

/*The Call Code*/
.highlight-container {width:1060px;}
.wiki-page-container {width:1060px;}
.large-3 columns sidebar {display:none;}
.sidebar-last-updated {display:none;}
.sidebar-see-all-wiki-pages {display:none;}
.post-section.post-main {width:1060px;height:631px;}
.header-icon {visibility:hidden;}
.wiki-page-name {visibility:hidden;}
.wiki-page-name.title {visibility:hidden;}
.campaign-landing-page-container {width:1060px;height:641px;}
.microdata hide {visibility:hidden;}
.wiki-edit {visibility:hidden;}
.large-3.columns.sidebar {visibility:hidden;}

Pils · December 2013

Your campaign is private Hurst, I can only see: "Sorry, you are not authorized to view that page."...

HurstGM · December 2013

oh yea my bad ill fix that. Ok everyone should be able to see it now. Im almost done with the adventure logs and will be working on the character area next.

ChainsawXIV · January 2014

Hiding an entire element can be done with _display:none_. By comparison, _visibility:hidden_ hides an element's content, but keeps that element taking up its usual space within the layout. The _display_ property has a number of other useful values, which you can check out "here":http://www.w3schools.com/cssref/pr_class_display.asp. And for what it's worth, that site has been invaluable to me over the years learning CSS. Excellent reference, and good tutorials, with sensible layman's terms explanations. Highly recommended to you HurstGM.

And on the FAQ front, it's on my to-do list to come through and reforge-check and update all of this. At the moment I'm overhauling my DSTs, but this is next.

GamingMegaverse · January 2014

Chainsaw- You are awesome- one of my early inspirations, and continue to be so...

HumAnnoyd · January 2014

I am trying to get a skill list table to work on my "Fate of the Jedi Site":https://fate-of-the-jedi.obsidianportal.com/. For some reason the text is all grayed out. Not sure why that would happen. I have noticed the same problem on the Character List page. Below is the code I used for the table:

#content table {background-color: transparent; border-style: none; color: inherit;}

#content tr:nth-child(even) {background-color: transparent; color: inherit;}

I don't understand why it isn't working. It works on my Mass Effect site. Any suggestions would be awesome.

Basileus · January 2014

@HumAnnoyd: Do you currently have that code in there? It looks fine to me. (viewing on IE11)

HumAnnoyd · January 2014

I do. I am using Chrome. The text is grey not white. But the odd think is that the same code works on one site but not the other.

ChainsawXIV · January 2014

Put down the !important flag, and step away... :p

It looks like the issue you have here is that you're using !important in (not to put it too bluntly) a completely inappropriate way. CSS rules take precedence over each other in a relatively simple fashion, and the !important flag totally derails that system, with sometimes broken results in various browsers (as is the case here). The !important flag has a very specialized purpose, and if 1) you're not a CSS expert, and 2) you're using !important to do anything other than specifically override something someone _else_ has set !important, you should look very closely at what you're doing, because 99% of the time you're doing something wrong.

In this case you've got a real train-wreck of problems. In Chrome, the rules meant to set the table colors aren't working, so you get dark-on-dark content. In the other browsers, the rules that set the text and background colors for your whole wiki are also broken, so you get dark-on-light content, which actually looks right if you don't know that the background's the wrong color. At a glance, it looks like all of these problems (and more) can be chalked up to issues of precedence. The way you've written your CSS rules declares them less important than the default settings, because you're trying to use !important to get the job done rather than CSS's natural grammar.

The key here is to get rid of all those !important flags and get the right level of specificity in your CSS rules. In CSS, the more specific rule takes precedence over the more general, and this precedence of specificity is more important than order, so for example:

Targeting elements classed both _post-section_ and _post-main_ which are children of a _body_ tag classed _campaign-public-layout_:

@body.campaign-public-layout .post-section.post-main{...}@

Will always take precedence over simply targeting everything with class _post-main_:

@.post-main{...}@

This is why your rules didn't work without !important in Chrome, and probably why they still don't work in most browsers. The rule you have in there is less specific than the default rule, and it's possible that Chrome and the other browsers disagree about how to sort that out when you throw !important into the mix.

Your best approach when figuring this stuff out is to use the inspect feature in your browser to investigate the element you're trying to change, and straight-up copy and paste the rule used to set the default from the inspector tool. You can get more specific from there, if that rule is too general, but starting with that will help you avoid specificity issues. Take a pass at cleaning things up that way and I think you'll solve most if not all of your issues. If you get stuck or confused or just generally need help, or if doing that doesn't get everything working, come on back and I'll be happy to work through more specific issues with you.

HumAnnoyd · January 2014

So your advice is that my code is bad? Ummm. OK. I am self taught and am using what seemed to work at the time. If I take out the Important tags then my site no longer functions anything like the way I want it to. And for some reason my Mass Effect Site does. Even though it uses largely the same code. So if I do take out the Important tags how do I get things looking like they did before?

ChainsawXIV · January 2014

Without being able to test it directly, I'm guessing the the thing that's really blowing you up here is that when you do your _font-family_ callout of Trade Gothic, you have two single quotes before it, and one double quote after it, which is causing the browser to see everything between the first and second double quotes as the longest most nonsensical font name ever:

@font-family:''Trade Gothic® Next Soft Rounded",sans serif;@

Should actually be:

@font-family:"Trade Gothic® Next Soft Rounded",sans serif;@

The difference is invisible in many fonts. Pasting the code into something like Notepad++ that can color-code CSS for you, and using a mono-spaced font where it's easy to tell the two apart, makes this particular issue a lot easier to spot.

That being said, it would still probably still be worth your time to make a pass at swapping out !important flags for more specific rules, as doing so can avoid a lot of issues and frustration for you down the road. My point above really was that you'll likely end up having to go through that anyway in the long run, and would have found and fixed this issue (whatever it had turned out to be) along the way. If that's something you want to do, but the whole specificity thing isn't making sense, let me know and I can try to come at the explanation a different way and give some more examples.

GamingMegaverse · January 2014

@Chainsaw- I am glad that you are wading in here! We were encouraged to go !important crazy at the reforge, and many of us went that way..... without pointing fingers, I know that myself I probably have too many of said codes- we all just wanted to make our sites work!
Please know that all of us, not just HumAnoyd, are listening, and looking to improve....

HumAnnoyd · January 2014

Yeah. I guess all of my sites are using that tag. Mostly because as I tried to get things to work it was the only thing that seemed to have any effect. Thanks for pointing out the font family quotes issue. I NEVER would have spotted that. As for making the code more specific I am not sure what to do about that. As I said I am pretty much self taught. I know to use the inspect element tool but I am not always sure how to interpret what I get from it. And nothing seems to work unless I add the Important tag.

HumAnnoyd · January 2014

Odd. If I get rid of that second single quote from the font family then the site no longer seems to recognize the font call out. Sigh.

ChainsawXIV · January 2014

Heh... !important is kind of a trap that way. It makes things so easy, until it doesn't. I'll try to figure out a better way to introduce people to the specificity thing - I'm self taught too, and I didn't get it for years - but that will be a little later, as I've got plans tonight.

For your font name, I now see:

@font-family:''Trade Gothic® Next Soft Rounded',sans serif;@

Which should be:

@font-family:'Trade Gothic® Next Soft Rounded',sans serif;@

The key is that you need the same number of the same mark encapsulating the text. I believe either single or double quotes are valid, but it needs to be the same one on either side, and only one on either side.

Dropbeartots · January 2014

Is there anyone who can help me out with a burning question? I was pretty sure I as the answer to this some time ago, but I'm at a loss after combing this treasure trove for hours now. I'm looking for a way to anchor a background image inside of a container so that the image doesn't repeat itself over and over again if the text inside of the container is too long.

As an example of what I'm trying to fix, here's my WIP landing page.

https://burn-shift.obsidianportal.com

Kallak · January 2014

You'll want to add a "background-repeat:no-repeat" setting into the CSS for the image/box in question.

Dropbeartots · January 2014

Thanks for the suggestion Kallak.

That didn't seem to work quite as I was wanting, as now the container is white after the prolonged text. I was thinking that there was a particular effect that would cause the background image to anchor and the text would scroll along the background image or something like that but I can't recall what it is.

Kallak · January 2014

You talking more like having set height dimension on the box in question and then having a "overflow:scroll" setting for the text?

Dropbeartots · January 2014

That sounds like an interesting prospect, but I'm not sure how to go about that one, honestly.

Kallak · January 2014

Pretty easy really. Just have a div box made with your "background-image" of choice, then give it a "height:XXpx" and "overflow:scroll". Then add whatever text in there. The box will stay stationary and the text will scroll up inside of it.

Dropbeartots · January 2014

Ah, so you're talking div tags? I was thinking there was something with CSS for that so I didn't have to mod each and every wiki page. I'll try that out a little later though, and do some inspecting later when I get access to a browser that isn't on an RT tab.

Kallak · January 2014

Doesn't necessarily need to be inside div tags, but that's how I build boxes and such, so I just use that as my default.

Dropbeartots · January 2014

Can you give me an example from one of your pages that I can check out when I'm not mobile? Surface RT wasn't the best choice for a mobile platform in retrospect :( I'm at game night now, the real workhorse is at home. Thanks.

Kallak · January 2014

I don't have any boxes specifically set up to do that on my campaign ATM, but it would like something like so:

On the page itself:

@Insert long paragraph(s) [email protected]

Then in the CSS I would have something like:

@div.box-type-1 {
border:1px solid black;
background-image:url('Insert URL to background image here');
background-repeat:no-repeat;
height:100px;
overflow:scroll;
}@

You could also use "overflow:auto" instead of scroll. With "scroll" there's always a scroll bar, regardless of whether one is needed or not; with "auto" the scroll bar only appears if the content forces one. Hope this helps.

A Totally Unofficial CSS Help & Tips FAQ

Comments

June 2023
Candlekeep Mysteries

Howdy, Stranger!

Discussions

Categories

Forum

Information

A Totally Unofficial CSS Help & Tips FAQ

Comments

June 2023 Candlekeep Mysteries

Howdy, Stranger!

Discussions

Categories

Forum

Information

June 2023
Candlekeep Mysteries