Kami
Forum Cat
Posts: 40,198
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,198
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 20, 2017 17:00:46 GMT -8
Mixed - I see where you're coming from, but no. As Quozzo explained further, stylesheets are cached with the browser so it's better to put CSS there as much as possible. I've only had to use H/F for CSS once, and a little bit of copy/paste never hurt anyone. Plus, if you decide that you need additional styling -- say Theme 1 is black & white but Theme 2 is colour -- you have more freedom if you use the stylesheet to style content. The footer is still just HTML placed between the <body> tags of the forum, so there's really nothing different there regarding it making 'more sense' to put CSS with it. |
|
inherit
215396
0
Aug 14, 2019 11:01:05 GMT -8
Mixed
And the new sun rises. With it comes restored hopes and renewed dreams.
1,168
October 2014
mixedinterests
|
Post by Mixed on Mar 20, 2017 17:02:14 GMT -8
Oh, right! I'm adding on. I get where you're coming from though, Kami . Learning in general is a bit of a pain when looking at multiple sources like I know I should when each source says something different. lol Mixed - I see where you're coming from, but no. As Quozzo explained further, stylesheets are cached with the browser so it's better to put CSS there as much as possible. I've only had to use H/F for CSS once, and a little bit of copy/paste never hurt anyone. Plus, if you decide that you need additional styling -- say Theme 1 is black & white but Theme 2 is colour -- you have more freedom if you use the stylesheet to style content. The footer is still just HTML placed between the <body> tags of the forum, so there's really nothing different there regarding it making 'more sense' to put CSS with it. Okay. My styling should go into the CSS Style sheet. Should I then also have the code for the affiliate table in the Styling Sheet? If so, how can I be sure of where it manifests in the theme? Thanks again! |
|
Kami
Forum Cat
Posts: 40,198
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,198
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 20, 2017 17:16:11 GMT -8
Mixed - Well, it really depends. If it's CSS, I would say yes. I assume you're talking about content that's between <style> tags and not inline styles. If that's the case, then the bottom of the stylesheet should be fine. Classes and IDs determine where CSS appears, so as long as the page can find the class and/or ID it will render. Remember tho, CSS stands for Cascading Style Sheet, so it will load in order from top > bottom, with anything lower down overriding anything higher up (this is why PB recommends you add CSS at the bottom, so you can override their predefined styling). This might help: stackoverflow.com/questions/1321692/how-to-specifiy-the-order-of-css-classes |
|
inherit
215396
0
Aug 14, 2019 11:01:05 GMT -8
Mixed
And the new sun rises. With it comes restored hopes and renewed dreams.
1,168
October 2014
mixedinterests
|
Post by Mixed on Mar 20, 2017 17:30:56 GMT -8
Right. And then if you need something to override something no matter the order, you'd need to use the !important tag (I think that's how I saw it used in the Support Board for some styling). But I know I could be wrong. I want to be sure I have this right: - Anything between <style> tags can be moved to the bottom of the CSS and still effect the targeted elements in the footer or wherever it is.
- Where does javascript fit into this? I currently have it between the style and table since it targets a text area within the table. Stay with the table in the code or move to the CSS with the styling?
- And then the <table> can stay in the Footer. I don't need to move those over since that's all inline code.
(I really hope I'm getting this terminology right.)
|
|
Kami
Forum Cat
Posts: 40,198
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,198
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 20, 2017 18:11:54 GMT -8
Quick run down: - re: !important, essentially. but honestly I find myself using that most when i find something doesn't change even though it ought to / because something else is overriding it for some reason. tbh i don't always know why !important works (i mean i *do* i just don't know what else could be overriding a non !important item). - re css: yes, as long as those elements are targeted with a class and/or ID. if you have something like <div style="font-style: bold;"> but no class on the div, you'd have to add a class to it and then declare the styling in the css sheet. - i will defer to Quozzo on this one, but personally i put javascript between the <body> tags, immediately before the thing the javascript is supposed to affect OR if i need it only to affect something in particular, in one of the headers or footers (which is essentially putting it between the <body> tags, as the $[header] and $[footer] variables exist (these load your H/F wherever you've placed them in the template). quozzo may have some better / more thorough advice however. - yes for the table. any html should either go in the H/F or in the templates. personally, I don't really use the H/F if I can help it! I think there are maybe two scripts in my headers total, the rest of the js / HTML are in plugins and/or the templates (and i'd call it HTML since you're not actually programming anything. iirc 'inline code' refers to an actual function). |
|
inherit
216224
0
Aug 1, 2024 1:18:46 GMT -8
Quozzo
408
November 2014
quozzo
|
Post by Quozzo on Mar 21, 2017 8:34:52 GMT -8
- re: !important, essentially. but honestly I find myself using that most when i find something doesn't change even though it ought to / because something else is overriding it for some reason. tbh i don't always know why !important works (i mean i *do* i just don't know what else could be overriding a non !important item). In my experiance, I've found that the more specific the CSS rule (the more elements selected) the more importance it gives to that rule. So using Mixed's table as an example. .main-affzone-table tr td .home-info-table tr td {
background-color: red;
}
.home-info-table td {
background-color: blue;
}The last rule affecting the home-info-table should make all the cells blue, but they're still red because of the specificity of another rule. At least that's what I've found in my experience. - i will defer to Quozzo on this one, but personally i put javascript between the <body> tags, immediately before the thing the javascript is supposed to affect OR if i need it only to affect something in particular, in one of the headers or footers (which is essentially putting it between the <body> tags, as the $[header] and $[footer] variables exist (these load your H/F wherever you've placed them in the template). quozzo may have some better / more thorough advice however. If the CSS is staying in the page then you could just put it next to that. If not, you could try something drastic, which would actually allow you to use the same CSS on all themes. Create a plugin! It's really easy tbh. Just Go to admin panel, click Plugin, click Build, click Create New Plugin, give it a cool name, click create, select the Components tab, then add a JS and CSS component. Then insert the CSS and JS into their respective components and click save. The plugin will then work on all themes, including the CSS. You can even determine which themes the plugin will work on. You might need to use a "ready function" because it will be loaded into the header *sigh* but you want it to target elements after the page (Document Object Model) has loaded. So simply put your code into this: $(function(){
//your code here
)};It will then wait for the page to load using jQuery's built-in function. You should be ready to go. |
|
inherit
215396
0
Aug 14, 2019 11:01:05 GMT -8
Mixed
And the new sun rises. With it comes restored hopes and renewed dreams.
1,168
October 2014
mixedinterests
|
Post by Mixed on Mar 21, 2017 14:28:59 GMT -8
Kami, thank you so much for the explanations and help. And the lingo tips, of course.  Quozzo, your example just made a whole (small) article about rules overwriting each other make much more sense! Thanks! As for where each component (style, script, and table) should go, for now I think I'll move the style out of the footer and to the CSS for each theme. Both the script and the table will remain in the Global Footer because I know it works there and it sounds like where you'd have it without involving a plugin build. That is until I learn some JavaScript and jQuery to build a plugin! Never done it before so I'm a bit nervous but excited to learn something new. Plus, I think it would be cool to have the affiliate area more streamlined for adding and removing of banners like similar plugins. But I know that has to be a bit more complicated than a table, so I'm not going to hold off the opening of my forum for a plugin when I already have something functional (even if it isn't elegant in the backstage). I'm sorry, but I'm not sure I follow completely. The "ready function" you suggest is for if I go the way of the plugin, right? Or am I out of my depths here? I figure I can learn and develop the plugin while my forum is in its early days. At least my forum name could start getting out there. This was the last thing I needed to have before opening but now I'm seeing I have MUCH more to learn. Just trying to get a sense of my best options, I guess. Thank you.
|
|
Kami
Forum Cat
Posts: 40,198
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,198
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 21, 2017 14:35:18 GMT -8
Honestly, the only difference between putting codes in the H/F versus the templates is that the former will appear on every theme, and the latter will only appear for the theme you specify. As I mentioned, anything you put into the H/F is essentially being added to your templates via the $[header] and $[footer] variables so they are effectively the same action. Personally, I do everything I can in the templates versus the H/F as most things I change on an individual theme basis. There are only ever one or two elements that are universal across each theme, for me. I'm just learning javascript myself, but from my understanding, the answer is yes. If you decide to go via plugin, you'll need to add $(function(){
//your code here
)};
around the actual function (so, excluding the opening and closing tags) before placing it into the javascript component box when creating the plugin. //your code here would be replaced, as stated, by whatever code you're attempting to convert into a plugin. If the CSS you're using is also for the thing the javascript is affecting, you could also add your css to the plugin by using a css component box, as stated by Quozzo. Your mileage may vary though; personally, I like styling stuff per theme too much to put CSS declarations into a plugin and would rather manually change the values per theme without needing to resort to an override. |
|
inherit
215396
0
Aug 14, 2019 11:01:05 GMT -8
Mixed
And the new sun rises. With it comes restored hopes and renewed dreams.
1,168
October 2014
mixedinterests
|
Post by Mixed on Mar 21, 2017 18:41:16 GMT -8
Makes sense. Kami , actually, I'm very glad and grateful to both you and Quozzo . Putting the styling in the CSS for the themes made me realize the set px width for the table didn't translate well between forums. Transferring it over, gave me a chance to beat out a few extra kinks. Thank you. And I'm glad to know I'm not the only one here that doesn't understand the language. I know I'm probably thinking of a complex potential plugin if I ever convert the whole thing over, but maybe that's the best way to learn - diving in. At least it is for learning a foreign language. I really should learn this. Then maybe I could understand everything in this thread rather than feeling like I'm only half understanding. But all is good right now. I have a functioning table across my forum's themes and I have time to play (a little here and a little there, but every little bit helps). |
|
inherit
217348
0
Jul 27, 2022 7:26:44 GMT -8
Lynx
5,846
January 2015
msg
|
Post by Lynx on Mar 21, 2017 22:08:54 GMT -8
Mixed, This line: $(function(){is probably something you've already seen - but it looked like this: $(document).ready(function() {Also, that "Who's Who" (which uses a table) on AA has an editable copy of that plugin (RP Characters) if you want to take a look at it. Just go to Admin > Plugins > Build and click on the RP Characters plugin. Once in, click the Components tab at the top. That plugin only has a JS component, but it's a start.
|
|
inherit
215396
0
Aug 14, 2019 11:01:05 GMT -8
Mixed
And the new sun rises. With it comes restored hopes and renewed dreams.
1,168
October 2014
mixedinterests
|
Post by Mixed on Mar 22, 2017 9:26:59 GMT -8
Thanks, Lynx! Glad to know there's a working one I can look at. I promise not to break anything.  |
|
