Site Design
- Thread starter Pixel
- Start date
Lex
Administrator
I messed around for a while and lost a few hairs in the process 
The theme comes with a plugin that requires us to create a page to use as a static front page - said plugin allows customisation of content layout. I'll need to figure out another time how to actually feed news articles into say one of these "widgets within a page" style things.
In terms of colour, banner heading etc., we'll have to edit the CSS as expected.
Certain functions are not contained within the theme editor itself, that is, "number of posts displayed" under "reading" in "settings" (wordpress options) - this is universal regardless of which theme you're using (and fraction uses these default settings), which presents a problem with Flint and I each working on different themes.
Everything I've created (menus, widgets etc.) I've labelled "Fraction: [insert what it is here]" so we don't get confused. I literally just added a menu and a couple of sidebar things to see how it looks, but I can't create a static front page because the plugin's "frontend editor" just left me with a perpetual loading icon. Moar when I can
I should also note that I've been working in a child-theme because I didn't want to fuck the original theme up too much, but I'm going to have to work with the actual theme to make any kind of meaningful changes to the CSS in order to change the way it looks, because you can't directly edit CSS in the child theme.
The theme comes with a plugin that requires us to create a page to use as a static front page - said plugin allows customisation of content layout. I'll need to figure out another time how to actually feed news articles into say one of these "widgets within a page" style things.
In terms of colour, banner heading etc., we'll have to edit the CSS as expected.
Certain functions are not contained within the theme editor itself, that is, "number of posts displayed" under "reading" in "settings" (wordpress options) - this is universal regardless of which theme you're using (and fraction uses these default settings), which presents a problem with Flint and I each working on different themes.
Everything I've created (menus, widgets etc.) I've labelled "Fraction: [insert what it is here]" so we don't get confused. I literally just added a menu and a couple of sidebar things to see how it looks, but I can't create a static front page because the plugin's "frontend editor" just left me with a perpetual loading icon. Moar when I can
I should also note that I've been working in a child-theme because I didn't want to fuck the original theme up too much, but I'm going to have to work with the actual theme to make any kind of meaningful changes to the CSS in order to change the way it looks, because you can't directly edit CSS in the child theme.
Last edited:
Lex
Administrator
The theme actually came with Visual Composer, it's VC that wouldn't load
Seems to be fine today, though I don't have time to fiddle with it again until tomorrow.
Fangu
Great Old One
Nods at Flint. The C in CSS is for 'cascading' after all.
Meaning if you have a
in the main theme, and you want this to be bigger in the child theme, simply "overwrite" it by adding
in the child theme. The CSS loaded at last will take precedence, and the very final CSS to be loaded is whatever you put directly into the markup, like style="font-size: 2rem;" (but you really don't want to do this unless absolutely necessary.)
This also goes back to what I said about mobile. If you look at our current CSS, there are a section of @media-tags at the end of the CSS sheet, which refers to width of the screen. For wherever you want stuff to look different in mobile, you can use that kind of logic to make certain elements stack differently. So when I say "keep mobile in mind", it's more - keep in mind that if you make changes to how stuff stack on desktop, or change sizes or widths or whatever, remember they probably need to be adapted to mobile as well.
Have you ever used the "Inspect Element" addon in Chrome? I highly recommend it. Press F12, press the mouse icon and select whatever you want to inspect (or right click on an element on the page and click "Inspect Element"). CSS will be listed on your right side, referring to which file it is loaded from. The CSS on the top is the last to be loaded. If you untick the boxes, you will be able to see what the page would look like if you removed part of the CSS. Very handy.
I use that tool on a daily basis, not just for development, but also in meetings to give a quick, visual demo of what something would look like, or to point out problematic things about what they want. Outside meetings too; I change stuff in the add-on, screenshot it and put it into our issue system. That way I don't have to touch GIMP/Photoshop at all. <-- Referring to the fact that you can actually edit the html markup too, not just the CSS. If course if you refresh the page, it goes back to how it was loaded from the server.
Meaning if you have a
Code:
.infoBox h1 {
font-size: 1rem;
}in the main theme, and you want this to be bigger in the child theme, simply "overwrite" it by adding
Code:
.infoBox h1 {
font-size: 2rem;
}in the child theme. The CSS loaded at last will take precedence, and the very final CSS to be loaded is whatever you put directly into the markup, like style="font-size: 2rem;" (but you really don't want to do this unless absolutely necessary.)
This also goes back to what I said about mobile. If you look at our current CSS, there are a section of @media-tags at the end of the CSS sheet, which refers to width of the screen. For wherever you want stuff to look different in mobile, you can use that kind of logic to make certain elements stack differently. So when I say "keep mobile in mind", it's more - keep in mind that if you make changes to how stuff stack on desktop, or change sizes or widths or whatever, remember they probably need to be adapted to mobile as well.
Have you ever used the "Inspect Element" addon in Chrome? I highly recommend it. Press F12, press the mouse icon and select whatever you want to inspect (or right click on an element on the page and click "Inspect Element"). CSS will be listed on your right side, referring to which file it is loaded from. The CSS on the top is the last to be loaded. If you untick the boxes, you will be able to see what the page would look like if you removed part of the CSS. Very handy.
I use that tool on a daily basis, not just for development, but also in meetings to give a quick, visual demo of what something would look like, or to point out problematic things about what they want. Outside meetings too; I change stuff in the add-on, screenshot it and put it into our issue system. That way I don't have to touch GIMP/Photoshop at all. <-- Referring to the fact that you can actually edit the html markup too, not just the CSS. If course if you refresh the page, it goes back to how it was loaded from the server.
Last edited:
Lex
Administrator
I've used inspect element but I've never actually unticked the boxes, that makes this a lot easier re: finding what to change/ seeing how things look. Thanks fangu!
I'm not going to lie, I naively thought that the fraction theme would look similar to the demo page with ready-made-options to add/remove elements as needed (in the appearance editor). While this is partially true for things like widgets, this only works if you have it set to display "latest posts" in a blog style format rather than "static front page" which is what I need to create (using VC) to make the site look anything like the way we want it to.
All I really did last night was mess around and add a menu bar and a few widgets, and a floating sidebar (I know people hate this idea I just wanted to see how it looks) on the right. But it gave me an idea of having something like that on the page for when navigating - one of Claymore's ideas was something like this so that you know where you are on the "site tree" so to speak. We have the extra horizontal space for it. When you load the page on mobile it simply shifts the sidebar widgets and menus to the bottom of the posts.
I took some screenies of how this is handled on mobile (it has a neat "toggle menu" option for mobile):
Then if you tap the menu;
Random widgets I was experimenting with:
I'm not going to lie, I naively thought that the fraction theme would look similar to the demo page with ready-made-options to add/remove elements as needed (in the appearance editor). While this is partially true for things like widgets, this only works if you have it set to display "latest posts" in a blog style format rather than "static front page" which is what I need to create (using VC) to make the site look anything like the way we want it to.
All I really did last night was mess around and add a menu bar and a few widgets, and a floating sidebar (I know people hate this idea I just wanted to see how it looks) on the right. But it gave me an idea of having something like that on the page for when navigating - one of Claymore's ideas was something like this so that you know where you are on the "site tree" so to speak. We have the extra horizontal space for it. When you load the page on mobile it simply shifts the sidebar widgets and menus to the bottom of the posts.
I took some screenies of how this is handled on mobile (it has a neat "toggle menu" option for mobile):
Then if you tap the menu;
Random widgets I was experimenting with:
Last edited:
Lex
Administrator
Absolutely everything you see will be completely different when I actually take the time to try and sort it, so the answer is maybe
I still need to find a way to add the site banner you made and icons and other such TLS'ey things without destroying the overall feel of the theme, while also maintaining a top menu without that horrible block-style they force you to keep. Then there's the colour scheme, because we're staying dark last I checked and all that is handled through CSS.
Whatever we end up with, one thing is clear: we're going to have to dig through content to make sure it all looks correct. The day Fangu warned us about eons ago has finally come XD. Older posts for example don't have featured images at all, so the theme doesn't pull an image for those and you're left with a blank space. We're very lucky her site redesign got us to start adding and tagging things properly or we'd be in a hell of a state trying to put in a modern theme now.
Old news posts and articles look fine because they're formatted within reasonable paramaters, but certain instances (like pages where we've used custom formatting) don't look presentable at all, so this will be a long process even when we've settled on a final content structure.
I still need to find a way to add the site banner you made and icons and other such TLS'ey things without destroying the overall feel of the theme, while also maintaining a top menu without that horrible block-style they force you to keep. Then there's the colour scheme, because we're staying dark last I checked and all that is handled through CSS.
Whatever we end up with, one thing is clear: we're going to have to dig through content to make sure it all looks correct. The day Fangu warned us about eons ago has finally come XD. Older posts for example don't have featured images at all, so the theme doesn't pull an image for those and you're left with a blank space. We're very lucky her site redesign got us to start adding and tagging things properly or we'd be in a hell of a state trying to put in a modern theme now.
Old news posts and articles look fine because they're formatted within reasonable paramaters, but certain instances (like pages where we've used custom formatting) don't look presentable at all, so this will be a long process even when we've settled on a final content structure.
Fangu
Great Old One
Just took a look on the desktop version. I have to say though, I'm happy to see the black and the Lifestream-green on a white background. I know it might not be to everyone's taste, but I always saw the updated, modern final-so-far front page design as with a white background (for everything text-related, previews and articles and such). It's how I imagined a more 'professional' looking layout - not that I don't love the black background - it was truer to the forums and old design at the time. With a bit of tweaking (more familiar images, fonts, icons and such) I think it will look really good. (This based on Fractions, I haven't seen the other one yet, maybe it's similar in style. Looking forward to see it.)
Claymore
3x3 Eyes
Someone more technical might be able to answer this, but from my limited experience, I know that you can download a 'regenerate thumbnails' plugin, that will shift all the dimensions of all media into those most suited for the current theme. But obviously this will take a little while to process if you have tons of photos. Plus, the current theme needs to be fully 'active' in order for it to recognise the theme's required dimensions.
Could be done after a theme is selected.
And yeah, a lot of formatting will need to be done on articles (which I'm happy to help out with if you need the help, by the way. As there are a lot of new sidebars and areas that need to be set up)
I noticed an error where the video link in an article doesn't fit into the actual text area - but I'm unsure if this is a VC problem, an embed problem, or if it's simply because the theme isn't fully activated yet.
Lex
Administrator
Just fire away when ready, I've only really gone in and messed around, nothing too serious. I hesitate to use the term "slacking" myself since I've been living a bizarre existence for the past two weeks-ish that kind of prevented me from doing much work on it.
As far as core wordpress settings, I don't think I changed anything for the theme. Anything I made I labelled "x - fraction" (menus etc.) but proceed as you see fit whenever you're ready.
As far as core wordpress settings, I don't think I changed anything for the theme. Anything I made I labelled "x - fraction" (menus etc.) but proceed as you see fit whenever you're ready.
Flintlock
Pro Adventurer
You're not being cheeky, I said I'd do it and I haven't.
I very much do still intend to do it but it's hard to find the motivation. I ended up working on something else for TLS last week, a personal project that isn't anywhere near as important, as a kind of structured procrastination.
I very much do still intend to do it but it's hard to find the motivation. I ended up working on something else for TLS last week, a personal project that isn't anywhere near as important, as a kind of structured procrastination.
Channy
Bad Habit
- AKA
- Ruby Rose, Lucy
as a kind of structured procrastination.
I think we're all guilty of this and is a good way to justify it
Lex
Administrator
I've been editing smartmag now, which looks a lot better in terms of functionality and features than fraction so far.
I've enabled "about the author", which appears below the article. So we'll need to get everyone to include a little blurb about themselves, and if we want can start using real names. Recognition of work and all that.
Look at how Dawn's post appears, for example. It's a little busy because of widgets that will be changed, but the article itself is nice and clear, the title and image in particular. Looks quite profesh.
I've enabled "about the author", which appears below the article. So we'll need to get everyone to include a little blurb about themselves, and if we want can start using real names. Recognition of work and all that.
Look at how Dawn's post appears, for example. It's a little busy because of widgets that will be changed, but the article itself is nice and clear, the title and image in particular. Looks quite profesh.
Lex
Administrator
The theme also has a built-in social media plugin, so we can deactivate the old one (if I can remember what it's called XD).
I edited my own author profile which you can see here.
Currently downloading photoshop to get the site banner the correct width. Font/colour correction and layout after.
For the record, you can choose between "boxed" and "wide". Boxed looks better IMO, but I'll screenshot both later as a comparison.
I edited my own author profile which you can see here.
Currently downloading photoshop to get the site banner the correct width. Font/colour correction and layout after.
For the record, you can choose between "boxed" and "wide". Boxed looks better IMO, but I'll screenshot both later as a comparison.
Jason Tandro
Banned
- AKA
- Jason Tandro, Doc Brown, Santa Christ, FearAddict, Thibault Stormrunner, RN: Micah Rodney
