Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Oct 15, 2016 12:14:19 GMT -8
When I was writing it, I thought it was different (for some reason. I don't know the reason) so I put the code separately and not together. I don't know why I thought it would be better organizationally if I put the different instances separately. I'm realizing that if and when I code, I should take time to sit back and remember to put all HTML together, all CSS together and all JS together, not sporadically placed like I did on the page. When I gave it to you, I didn't specify an a anywhere. No wonder it didn't work... (There's a duh moment!...) When I first wrote the code, my thought was, "I don't want it in the Style Sheet because it would go on the whole forum, and not on the page itself. This is the first time I've ever coded a page straight from CSS, so I'm learning. Thank you for telling me that it can go into the Style Sheet. I didn't think of that. Whoops, no, that's not the CSS for the links. When I coded this, I coded it horribly. I'm not afraid to say that. It was my first time coding a page, and when I was writing it, the reason why I have different pieces there, is because I thought that they were different. It didn't occur to me that I could put them all together under the same CSS... but, I can because that would just be one instance of CSS, like in a stylesheet, right? Kind of like the JS - it only has to be there once. There doesn't have to be more than one instance of CSS either, right? I forgot I could put it at the bottom of the page and it would still effect all of them. I wasn't thinking straight when I coded this, I guess. :x This was also my first time working with accordion code, so it was a learning curve for me... a big one at that!
In regards to your edits: - EDIT: I realize that now. I thought for some reason to use the comments that go with the code instead of using HTML comments for everything. I thought that if I did, it would show on the page. So, when using comments on an HTML page, the only comments that will work are HTML comments. I thought that the comments had to be what they are for the code (HTML comments for HTML, CSS comments for CSS, JS comments for JS.)
- EDIT 2: I have a handful of themes, which is why I thought about putting it into the page itself. I either thought of the page itself, or the Global Header so I would only have to put the code for the page once, and not on each individual Style Sheet.
- EDIT 3: It's my first time I've ever worked with JS for an extended period of time. I thought that if you wanted to have multiple of something, like an accordion for example, on a page, that you had to put more than one instance on the page, like I did.
- EDIT 4: That is exactly what I would like, thank you! Thank you so much for your help, Kami . When I was coding it on my page, I did think that the accordions were a bit large, but I didn't know how to make them smaller, so I thought that I would have to live with it.
Also, should I change the styling of the first box to match the rest of them? That was another thing that I thought of when I was looking at your page... so the page is uniform to itself, not the forum. When I coded the page, the reason why I have purple as the backgrounds of each of them is because purple represents knowledge/wisdom and when you're learning Reiki that's what you're getting - knowledge of Reiki (history, how to pass on the attunements and so on.)
Seeing it on your page raised a question in my mind: If I want the bottom of the last accordion to be away from the ads, should I put a margin-bottom: #; onto the last accordion?Also, another question was raised in my mind when I was looking at your page: Would it be possible to put expand/collapse all links on the various accordions so it would expand/collapse all of the questions in that section? I looked on W3Schools (that's actually where I got the Accordion code,) but I cannot find anything to that effect. But just because I don't find it there doesn't mean that it's not possible, right? Thank you again, Kami ! :) PS: My apologies for the late response. I didn't see your response until now. I had to put my computer away because it was getting hot, and Tapatalk never alerted me to your response. O_o B-| :-/ To address this post, a double post because oops this is huge haha. ;x 1. This has already been answered, but here's the thing about stylesheets and classes (which is also part of why I suggested using unique classes). While, yes, you'd have to add this CSS to every theme that you use, using unique classes will prevent the CSS for the custom page from affecting any other elements. Basically, if you style (for instance) a {style here} that will affect every link on the forum; but, if you style a.class or .class a it will look ONLY for links that fit the requirements of either being a link with a specific class (the former) or being a link within an element of a specific class (the latter). If these classes only appear within the custom page, then those will be the only elements on your forum that are affected. Personally I'd use the stylesheet because I would probably style the contents based on how each theme looks. Relative colour is a thing, so having identical styles across all themes would be, for me as a designer, a choice I'd avoid. 2. My advice for you here is group like with like -- all HTML goes with HTML, all CSS with CSS, and so on. That way if you need to troubleshoot, you can find all of your [thing] components in one area, instead of scrolling repeatedly and trying to figure out which thing does what. In this particular instance, if you had done so, you would've noticed that you had several elements like button.accordion repeated three times with zero differences to the CSS. You also had different classes with identical CSS. What I wound up doing is eliminating any duplicate CSS classes & styles, and combining CSS with identical styles. 3. As a rule of thumb, I've found, don't repeat js unless the instructions specifically tell you it needs to be repeated. I'm not too handy with writing js from scratch, but usually how they work is that the js will specify the action that needs to be performed so even if you need it performed multiple times on the page, as long as xyz conditions are filled one instance of the js will suffice. I mean it's not a hard and fast rule, but unless otherwise specified it works pretty well. 4. If you want my advice on whether or not you should change the colours, see #1. It all depends, imo, on what the theme's colours are. Personally, while purple is one of my favourite colours, I'd probably put in the extra elbow grease and make something that either matches, or is complementary to, each of the themes on my site for a look of uniformity or at least cohesiveness to the theme. 5. I was puzzling over this a little bit last night, regarding the margins and the ads. Personally I'd probably just put a <br /> line break after the last </div> instead of fiddling with margins, because on my view of the test site there IS already a gap, but there isn't one on smaller resolutions like the mobile desktop view. 6. It should be possible to have an expand/collapse all appended to the current accordion code, but unfortunately like I mentioned I am not great with js myself. I believe the last code I wrote was sometime in 2010, haha, and Craig wound up changing my ten-line attempt to three lines xD;' Unfortunately, we don't have a generic coding & development board anymore (@ admins why pls) so I'd recommend heading over to the Headers & Footers board and asking for assistance there. PHEW. Hopefully this answers everything, let me know if I've missed something!
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Oct 15, 2016 12:26:35 GMT -8
Alan Vende - Quick question before I hand over the coding, do you want me to go ahead and make the TOC have the same colour scheme as the content? If you want my 0.02, I'd leave it as is, I think it makes the TOC stand out as not being part of the informational quality of the rest of the page. EDIT: one more thing, for the record. The 'title bars' on the Reiki content versus the TOC are different because you did not specify styling for the title area. :P While you DID put them all in a div with a class, the only CSS you specified was the link colour for that div, meaning the background is transparent and what you see is the 'all encompassing background'.
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Oct 15, 2016 12:28:08 GMT -8
Alan Vende , So I'm glad Kami was able to help you in my absence and of course, better than I could have :P. So are things how you want or is there something left to adjust? ._.;' sorry
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 15, 2016 12:38:02 GMT -8
When I was writing it, I thought it was different (for some reason. I don't know the reason) so I put the code separately and not together. I don't know why I thought it would be better organizationally if I put the different instances separately. I'm realizing that if and when I code, I should take time to sit back and remember to put all HTML together, all CSS together and all JS together, not sporadically placed like I did on the page. When I gave it to you, I didn't specify an a anywhere. No wonder it didn't work... (There's a duh moment!...) When I first wrote the code, my thought was, "I don't want it in the Style Sheet because it would go on the whole forum, and not on the page itself. This is the first time I've ever coded a page straight from CSS, so I'm learning. Thank you for telling me that it can go into the Style Sheet. I didn't think of that. Whoops, no, that's not the CSS for the links. When I coded this, I coded it horribly. I'm not afraid to say that. It was my first time coding a page, and when I was writing it, the reason why I have different pieces there, is because I thought that they were different. It didn't occur to me that I could put them all together under the same CSS... but, I can because that would just be one instance of CSS, like in a stylesheet, right? Kind of like the JS - it only has to be there once. There doesn't have to be more than one instance of CSS either, right? I forgot I could put it at the bottom of the page and it would still effect all of them. I wasn't thinking straight when I coded this, I guess. :x This was also my first time working with accordion code, so it was a learning curve for me... a big one at that!
In regards to your edits: - EDIT: I realize that now. I thought for some reason to use the comments that go with the code instead of using HTML comments for everything. I thought that if I did, it would show on the page. So, when using comments on an HTML page, the only comments that will work are HTML comments. I thought that the comments had to be what they are for the code (HTML comments for HTML, CSS comments for CSS, JS comments for JS.)
- EDIT 2: I have a handful of themes, which is why I thought about putting it into the page itself. I either thought of the page itself, or the Global Header so I would only have to put the code for the page once, and not on each individual Style Sheet.
- EDIT 3: It's my first time I've ever worked with JS for an extended period of time. I thought that if you wanted to have multiple of something, like an accordion for example, on a page, that you had to put more than one instance on the page, like I did.
- EDIT 4: That is exactly what I would like, thank you! Thank you so much for your help, Kami . When I was coding it on my page, I did think that the accordions were a bit large, but I didn't know how to make them smaller, so I thought that I would have to live with it.
Also, should I change the styling of the first box to match the rest of them? That was another thing that I thought of when I was looking at your page... so the page is uniform to itself, not the forum. When I coded the page, the reason why I have purple as the backgrounds of each of them is because purple represents knowledge/wisdom and when you're learning Reiki that's what you're getting - knowledge of Reiki (history, how to pass on the attunements and so on.)
Seeing it on your page raised a question in my mind: If I want the bottom of the last accordion to be away from the ads, should I put a margin-bottom: #; onto the last accordion?Also, another question was raised in my mind when I was looking at your page: Would it be possible to put expand/collapse all links on the various accordions so it would expand/collapse all of the questions in that section? I looked on W3Schools (that's actually where I got the Accordion code,) but I cannot find anything to that effect. But just because I don't find it there doesn't mean that it's not possible, right? Thank you again, Kami ! PS: My apologies for the late response. I didn't see your response until now. I had to put my computer away because it was getting hot, and Tapatalk never alerted me to your response. To address this post, a double post because oops this is huge haha. ;x 1. This has already been answered, but here's the thing about stylesheets and classes (which is also part of why I suggested using unique classes). While, yes, you'd have to add this CSS to every theme that you use, using unique classes will prevent the CSS for the custom page from affecting any other elements. Basically, if you style (for instance) a {style here} that will affect every link on the forum; but, if you style a.class or .class a it will look ONLY for links that fit the requirements of either being a link with a specific class (the former) or being a link within an element of a specific class (the latter). If these classes only appear within the custom page, then those will be the only elements on your forum that are affected. Personally I'd use the stylesheet because I would probably style the contents based on how each theme looks. Relative colour is a thing, so having identical styles across all themes would be, for me as a designer, a choice I'd avoid. 2. My advice for you here is group like with like -- all HTML goes with HTML, all CSS with CSS, and so on. That way if you need to troubleshoot, you can find all of your [thing] components in one area, instead of scrolling repeatedly and trying to figure out which thing does what. In this particular instance, if you had done so, you would've noticed that you had several elements like button.accordion repeated three times with zero differences to the CSS. You also had different classes with identical CSS. What I wound up doing is eliminating any duplicate CSS classes & styles, and combining CSS with identical styles. 3. As a rule of thumb, I've found, don't repeat js unless the instructions specifically tell you it needs to be repeated. I'm not too handy with writing js from scratch, but usually how they work is that the js will specify the action that needs to be performed so even if you need it performed multiple times on the page, as long as xyz conditions are filled one instance of the js will suffice. I mean it's not a hard and fast rule, but unless otherwise specified it works pretty well. 4. If you want my advice on whether or not you should change the colours, see #1. It all depends, imo, on what the theme's colours are. Personally, while purple is one of my favourite colours, I'd probably put in the extra elbow grease and make something that either matches, or is complementary to, each of the themes on my site for a look of uniformity or at least cohesiveness to the theme. 5. I was puzzling over this a little bit last night, regarding the margins and the ads. Personally I'd probably just put a <br /> line break after the last </div> instead of fiddling with margins, because on my view of the test site there IS already a gap, but there isn't one on smaller resolutions like the mobile desktop view. 6. It should be possible to have an expand/collapse all appended to the current accordion code, but unfortunately like I mentioned I am not great with js myself. I believe the last code I wrote was sometime in 2010, haha, and Craig wound up changing my ten-line attempt to three lines xD;' Unfortunately, we don't have a generic coding & development board anymore (@ admins why pls) so I'd recommend heading over to the Headers & Footers board and asking for assistance there. PHEW. Hopefully this answers everything, let me know if I've missed something! It is huge, you're right. :x 1. I never heard of relative color before. Thank you for bringing that to my attention! Another reason why I specified the colors in the HTML page was because I don't know the variables that are used in the Style Sheet to make it so it's uniform with the whole forum. When I made the themes that are on my forum, I just went with styles and such, 2. That is normally what I do myself - as with all of my other things on my forum - including, but not limited to, plugins in development (although, the coding boxes do help with that a great deal :x) Thank you for that. I should have realized about keeping it all together in the first place. I wasn't thinking clearly when I wrote it, I guess. :x 3. I'm not handy with writing it from scratch either. The JS that I have on the page JS found here (that's also why the design was so large). 4. To do that, would you use ProBoards' variables that are already in the Style Sheet (such as .title-bar?) The only designing that I have done on my themes is pretty much through the Colors and Theme Creator with minimal CSS - either moving pictures to where I want them or what have you. I haven't thought about how the Custom Pages would look. To be honest, I forget about them when designing the theme and then go just for the design of the boards and such. My bad! :x 5. I was wondering which one to use. I was thinking of the margins, like I said, but yeah, I think you're right with the <br>, so I think I will do that and see how it looks. But Brian said in a post that you should use margin when dealing with styled blocks and <br> is only for text. (I wrote a post about this a few months back, I think, but I'm not sure what I called it or anything, which is why I'm tagging him.) 6. I think that it is possible because I've seen it elsewhere, but I don't know how exactly it was created/what code was used. Thank you for the suggestion! Would it be Headers and Footers or Templates? I always seem to get the two confused. What qualifies an H/F code as opposed to a Template mod? I mean, I get the difference in where they are placed, but what makes the code itself an H/F code or Template mod? Can't they technically be placed in either location? I think I hit on everything, right? My apologies if I didn't - and my apologies for such a long post!
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 15, 2016 12:46:40 GMT -8
Alan Vende - Quick question before I hand over the coding, do you want me to go ahead and make the TOC have the same colour scheme as the content? If you want my 0.02, I'd leave it as is, I think it makes the TOC stand out as not being part of the informational quality of the rest of the page. EDIT: one more thing, for the record. The 'title bars' on the Reiki content versus the TOC are different because you did not specify styling for the title area. While you DID put them all in a div with a class, the only CSS you specified was the link colour for that div, meaning the background is transparent and what you see is the 'all encompassing background'. Regarding the TOC: When I looked at your page, the spacing didn't look right, which is why I thought to change it. I thought that that would make it work correctly. ...or is my eye sight just terrible and they are equally spaced? You're right, it does make it stand out, but I was just wondering about keeping it uniform with the page. Would it not look "appealing," for lack of a better term. (I'm not sure how to phrase that, my apologies!) that's why I was going back and forth on that. Screenshots: In regards to your EDIT: Yeah, I'm known for writing classes/ID's and not specifying any styling for them! Thank you for telling me! I was wondering why it was transparent like that. I thought it was magic!
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Oct 15, 2016 13:02:27 GMT -8
Alan Vende - Not going to quote because it's going to be too long haha. 1. Relative colour is a very important part of design work (illustration, web design, or otherwise). It's why the same shirt will have a different overall impact on two people with different skin tones, or why the same shade of lipstick will look like two drastically different colours on a pale person versus a dark-skinned person. When it comes to web design, relative colour impacts accessibility (how easily your design can be navigated, in this specific instance, read). It's okay that you don't know the styles, I'm not necessarily advocating for them to be identical to each theme. For example on the black & white theme I'm currently using on my account, the purple is a bit bright -- for that theme, I'd probably wind up using a more desaturated version of purple, or making it some sort of grey monochrome to fit the theme. You don't NEED to know the CSS variables, you just have to keep relative colour in mind when specifying the colours for the styles. For example, the purple imo would clash horribly with the red / orange theme you have up by default at the moment for Samhain, so I'd lean towards something more similar as opposed to different. 2. That's fine! It happens. On that note, I have to specify something, haha. The comments you were writing were fine in theory (CSS for CSS, etc). BUT! The problem was you were writing them outside of the tags. The reason you can use CSS comments in your stylesheet is because that's already been given the filetype of .css -- the <style></style> tags are implied. On the custom page, however, the filetype is .html, so any non-HTML comments would have to go within the tags of the language you're using that isn't HTML. I hope that makes sense. 3. Skipping this one because we touch again on the js in a later bullet point. 4. Well, part of it is easy. When you go to the theme creator there's an option for 'colours' (themes > theme creator > hover over theme > press colours button); if you click the black bar that says 'customise theme colours' you'll be able to get the hex codes for the title bars, containers, links, etc. Alternatively, you can just make something that goes well with the theme, rather than matching it exactly. The choice is yours. 5. Like I was saying though, I fiddled with this last night. I actually attempted to add a margin-bottom: 10px; to all of the divs (instead of how it is now, there's a <br /> between each) and for some reason it wasn't taking, for lack of a better word. I was getting sleepy by that point, so I stuck in some <br /> to force a line break. I can fiddle around with margins some more if that would make you more comfortable. 6. I'd go with Headers & Footers -- while you can, technically, place JS in your layout templates, it's not specifically a template code.
Regarding your second post: make WHAT look evenly spaced? You haven't actually said anything here, because we were talking about the title bar styling, and now you're talking about 'evenly spaced'. ;x I'm not on the same line of thinking as you, remember, so explain your questions fully please!EDIT: I got it sorted, all containers should now be 10px apart. Hopefully that's what you were after. (: And whether or not it looks appealing is, again, relative and also subjective. I've given you my design thoughts above, but personally I'd leave it as is and adjust the reiki content (background, buttons, etc) to complement the theme. This way the TOC will stand out, but won't be acrimonious with the reiki content's colour scheme.
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 15, 2016 13:26:57 GMT -8
It definitely is long! Thank you for not quoting! 1. I'm not very well-versed in this. Like I said, this is my first time hearing about relative color. So, to "simply," would that be "don't put light with dark and dark with light"? That I can understand. 2. I tried them inside of the tags, too, and they were acting as if they weren't comments, which is what was really weird. I don't know if it was the way I was writing them or what it was. It was really, really weird. So, would it be like this?
HTML
<!-- HTML Comment --> <a href="#">link</a>
CSS
<style> /* CSS Comment */ CSS </style>
JS
<script type="text/javascript"> // JS Comment JS </script> 4. Oh, I see! So the Color and Theme Creator could be used to get the Hex values that you can then use for the custom page's CSS in the Style Sheet to make it look like the theme, right? 5. I constantly use <br> tags. I rarely think about doing work with the margins manly because the <br> is what comes to the forefront of my mind when coding. I mean, it's not wrong to use <br> tags, is it?
I thought I specified, but I just went back to look at it and I didn't. My apologies! The boxes is what I meant. The TOC one and the one below it. It didn't look the same as the others (I thought I had said that with the screenshot. I didn't realize I sent it too quickly. My apologies!) I hope I do it correctly. You know what you're talking about, so it's easy for you. I hope I do it correctly! thank you for your help and insight, Kami ! PS: I think I hit on everything. If I didn't hit on something, please let me know!
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Oct 15, 2016 13:41:33 GMT -8
Alan Vende 1. ...No, not exactly :X The point of relative colour, is... well, that it's relative. How good X colour looks is dependent on the surrounding colours. There's no hard and fast rule of thumb because it's relative. I literally cannot give you a rule of thumb, because well, for instance: white text on a black background, or black text on a white background, is excellent -- it's the most contrasted, easy to read setup in terms of colour, so that immediately would contradict the rule of thumb you're proposing. ;x Here are a few links on relative colour that hopefully will be useful: 2. Yes that would be correct. 4. Exactly. It'd be a little time consuming depending on the # of themes you have, but imo it'd be worth it so that at the very least, it looks like its meant to be there instead of just kind of haphazardly placed. 5. For the record, that should be <br />. It's a small distinction but tags that don't appear to have closing tags (like <img /> for instance) need the space and forward slash to indicate that the tag is 'closed'. It is not bad to use line breaks, no. But Brian is right, they really should be used if you're writing text rather than styling elements. I was just too tired to fiddle with the margins more.
Regarding the margins, I wound up figuring it out as well. Can you check out the test page and make sure the elements are all correct? Let me know if you need any adjustments. kamitest4.proboards.com/page/reiki-test
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 15, 2016 14:17:06 GMT -8
1. There are always exceptions to the rule, right? ;p Thank you so much for the links. 2. I did that, though, and for some reason, they showed - no matter if I put them inside or outside of the tag, which is what I didn't understand. I still don't. It was really odd. 4. Hmm... that's true. I just hope I use the correct colors. It's like a test. 5. I should have realized that the / was what was closing that tag. Duh! What is the difference, though? I mean, they both work the same way. The only way someone could tell is if they could use their Developer Tools to look in the backbones, right? Or people who know what they're looking at. But it's just standard practice right?
Yes, that's how I wanted it. Thanks so much, Kami. Would it be possible to style the div with the title-bar class so it has the same spacing as the other titles that I coded into the page itself? I don't think it's possible because that particular piece is taking the CSS from the Style Sheet, right?
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Oct 15, 2016 14:45:41 GMT -8
Alan Vende 1. :P I suppose? But like I said, there really isn't a good rule of thumb that I can just sort of encapsulate nicely, beyond 'Colours look different based on their surrounding colours'. Honestly, imo it's just kind of trial and error unless you really want to get into colour theory, but it's pretty easy because it's so visual. Try something and if it's easy to read and looks good, then tada it works. Eventually you'll just get the hang of it so it becomes second nature to you. I guess a few good rules of thumb would be: - Black & White are always good choices when in doubt
- Saturated backgrounds look better with desaturated text and vice versa
- Colours with similar values should not be used as background/text to prevent contrast issues
(eg: blue bg with purple text will present issues, but blue bg with very light purple text prob. won't) - Neon colours 99% of the time are awful don't do it
2. Dunno what to tell you buddy. Perhaps it was a caching issue? I've fixed them all up though, in any case, so there should be no stray, uncommented text appearing anywhere.
4. Trial and error, my friend. The theme colours I directed you to will give you the exact title bar & container colours for each theme, so that should eliminate a lot of the guess work if you want it exact. If you want it to be harmonious with, but not exact, pop the dominant colour of that theme into the slot indicated by 'Base RGB' on the bottom left of the screen here on Paletton.
5. Actually, it's really not the same: <br> is compatible with HTML standards, but not XHTML or XML. Using XHTML standards is compatible with HTML standards, but not vice versa. I've also typed 'HTML' so many times it's lost all meaning.
Yes and no. I mean. Technically, they are entirely different elements with entirely different CSS. To elaborate, the titles on the reiki-content are styled only to have a small margin of 8px under the text -- the top padding is due to the 5px padding on the container, because as I said, you did not specify styles for the reiki content title bars. The TOC title-bar text has an overall padding of 5px because that is what the container has been specified to do (it didn't originally have one but I added some to make it look nicer). And actually, it is possible. Elements can have multiple classes at a time. I made the title-bar be both "title-bar" and "Reiki-TOC", so the element looks like this: <div class="title-bar Reiki-TOC">things here</div> In the CSS, I've specified this: .title-bar.Reiki-TOC { stuff here } This way it takes on the first class (title-bar) attributes, but I can still specify specifics for the second class (Reiki-TOC) to override any elements from the first class I want to change (such as the top & bottom padding). I've gone ahead and made it look visually identical, even though the coding is different. It may look a bit off due to the nature of the background assigned to the title-bar class by default, but the amount of space should be fine. Does that work for you? kamitest4.proboards.com/page/reiki-test
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 15, 2016 16:32:36 GMT -8
1. Saturated and unsaturated do not have different meanings in web design than they do generally speaking, do they? Because when I think of saturated, it means like something cannot take anymore of anything - like a sponge cannot take on anymore water. Thank you for the schemes! 2. I'm not sure what it was. It was really odd. I just hope that it doesn't happen again because if it does, I don't know what to say/how to diagnose it or how to explain it well enough to have the admins duplicate it. 4. The only guess work with that website is to figure out whether to put the Hex values in the title bar or into the container. Other than that, yes, all of the guess work is eliminated. Thank you! 5. I don't think that I have ever written anything in XHTML or XML formats, although I have heard of them.
I thought that if you use the .title-bar class that it would take the default values for the title bars and container from the Style Sheet, wouldn't it? Isn't that why people use them when coding something - like an affiliate table or some of the template mods here on PBS, such as the Welcome new member & show total thread & post count by xsteveuk? My apologies, I didn't see that you had edited your post. Thank you for the information regarding the .title-bar class. I didn't realize that if you use two classes like that that you could override the first. The page looks great, thanks so much.
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Oct 15, 2016 17:02:33 GMT -8
Alan Vende 1. In essence you'd be correct. A 'saturated' colour is a colour that with a high hue intensity, while a 'desaturated' colour is a colour with a low hue intensity. For example: These are both in the red family, but the first (#ff0000) is the most saturated red a red can be (true red), and the second (#c44a4a) is a desaturated red. All colours have varying degrees of saturation. 4. You probably have, actually. For instance: have you ever written <a href="link here">text</a> instead of <A HREF="link here">text here</A> ? Then congrats, you've written in XHTML compliant format. XHTML is simply a stricter standard than HTML, to force things like proper nesting (eg: <div><h3></h3></div> instead of <div><h3></div></h3> ), requiring all tags to be closed (hence <br /> versus <br> ) and so on. More info can be found here: www.w3schools.com/html/html_xhtml.asp
Yes, that's correct. That is why I also gave it a SECOND class. The class is both title-bar and Reiki-TOC. By default, the class inherits attributes from title-bar; adding a second class to it allows me to selectively override elements of the first class. So for instance, let's say the following: the class .title-bar has the following CSS:
.title-bar { background-color: #000; color: #fff; padding: 5px; font-size: 20px; }
Let's then say you want the class .Reiki-TOC to have the same exact styling, but with a smaller font size. You would then apply BOTH classes to the element with a space between each class name, like so: <div class="title-bar Reiki-TOC">content</div> Your CSS would then read: .title-bar { background-color: #000; color: #fff; padding: 5px; font-size: 20px; }
.title-bar.Reiki-TOC { font-size: 10px; } If you notice, I'm specifying that only a div with the class of title-bar AND Reiki-TOC has the 10px font size; if the element does not meet both conditions, the CSS will not apply. Since you want the Reiki TOC title bar to retain elements of the default title bar CSS, while having a larger font & spacing, this is the way to do it. I hope this makes sense! Anyway, attached is a text file with all the necessary components. I've gone ahead and put the CSS in a separate text file, WITHOUT <style></style> tags, so that you can just copy/paste it into each theme and change the colour values as necessary. The second text file is what you will put into your custom page HTML tab. reiki-faq-CSS.txt (2.61 KB) reiki-faq-HTMLandJS.txt (7.71 KB) Hope this helps! Let me know if you need anything (:
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 15, 2016 18:25:06 GMT -8
Kami 1. Thank you for the examples of red. (Red is my favorite color!) This is probably an elementary question, but Maroon is a less saturated form of red, right? 4. I actually have. I never realized it was XHTML, though. I always thought I was writing in HTML. Thanks for telling me the difference and giving me the link!
That helps a lot. Thank you for the information on the two classes! I've done it before, but like with the XHTML, I never realized the reasoning behind it. I just did it. :x Also, a question before I forget: I would like to make another page for Karuna Reiki. Could I use the same code for that, since it's the same, and just add a fourth container to the page and then the relevant CSS to the Style Sheet instead of doing something that could potentially get me into the problem that I had that started this and the previous threads? (I just wanted to ask before I attempted it, just to be safe. :x) Thank you so much for your help. I have implemented the HTML, CSS and JS onto my forum and have been playing around with it. It looks amazing. Thank you so, so much for your help.
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Oct 15, 2016 18:40:15 GMT -8
1. Essentially. Sorry to be so vague but this is moving into the realm of colour theory which is not really a very easy subject to teach in a few posts. Here are some links to get you started, instead 4. I mean, they are both HTML in that they are the same language. Like there really isn't a need to think of them as two separate languages, but rather as standards of compliance. Think of it as a recipe. Sure you can add the ingredients out of order and still get a rough approximation of what you wanted to do, but following the recipe will ensure it turns out properly and with as few problems as possible.
Sorry friendo, your question makes no sense. First you say you want a new page, then talk about just adding another container...? Can you clarify?
|
|
inherit
194230
0
Nov 21, 2015 5:56:42 GMT -8
Alan Vende
4,215
May 2013
l1o2u3i4s5
|
Post by Alan Vende on Oct 15, 2016 19:04:35 GMT -8
Alright, this is odd - my responses to your numbers keep showing up as blank. And this one went through. Odd.
1. Sorry for so many questions. I didn't realize we were venturing into color theory. It fascinates me! And thank you for the links! 4. They're two different roads to the same destination. Kind of like when you look at a map to get somewhere. Nine times out of 10, there is more than one way to get somewhere (but one way is shorter and the other is a lot longer. )
My bad! My mind was all over the place with that reply. There is another form of Reiki called Karuna Reiki which has four levels. That's why I mentioned the container, but also another page. I wanted to keep the two separate because they're two separate forms of Reiki, which is why I thought about doing two separate pages, but I didn't know if I could do what I was thinking of doing - just adding another container to it (like the Reiki I container,) and adding the fourth container to the CSS so it would get the same styles as the others. Does that make sense? Sorry for the confusion!
|
|