I need help with project template styles

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
TR Lisa
Sr. Propeller Head
Posts: 100
Joined: Thu Jul 06, 2017 8:09 am

I need help with project template styles

Post by TR Lisa »

I'm trying to modify the soledad template, starting with the landing page. Having all kinds of trouble figuring out what styles to modify to achieve my objectives. I'm looking at the source code for clues and clicking all through the StylesForHomePage style sheet. One simple thing I need to do is change the (black) background color of the center tiles. I've tried every variation of the div and p "container" styles I can find. I can change the background color of pretty much everything except the entire tile itself. After that it's just going to get more complicated. Other than the basic template reference I already have, what resources are available to help me through this?
bunnycat
Propeller Head
Posts: 70
Joined: Tue Nov 03, 2015 6:44 am

Re: I need help with project template styles

Post by bunnycat »

TR Lisa wrote:I'm trying to modify the soledad template, starting with the landing page. Having all kinds of trouble figuring out what styles to modify to achieve my objectives. I'm looking at the source code for clues and clicking all through the StylesForHomePage style sheet. One simple thing I need to do is change the (black) background color of the center tiles. I've tried every variation of the div and p "container" styles I can find. I can change the background color of pretty much everything except the entire tile itself. After that it's just going to get more complicated. Other than the basic template reference I already have, what resources are available to help me through this?
1. You want to edit the div.home-tiles > div class from the Soledad style sheets. That is where the black background is for those tiles.
It's applying attributes to any div class that comes after div.home-tiles.
2. Your browser should have an Inspection or Inspect element tool. This has been a life saver on the more cryptic styles and styles inheritance in the templates.

Hope this helps!

CAT
TR Lisa
Sr. Propeller Head
Posts: 100
Joined: Thu Jul 06, 2017 8:09 am

Re: I need help with project template styles

Post by TR Lisa »

Thanks for your reply! That's where I thought it was too. But that changes the color of the entire block that the tiles sit on. Unless I should be changing something other than the Background attribute. The tiles are still black. Will try and attach screen shot. I also see there's a styles thread in this forum so I should probably post there.
2018-05-17_12-12-08.png
You do not have the required permissions to view the files attached to this post.
bunnycat
Propeller Head
Posts: 70
Joined: Tue Nov 03, 2015 6:44 am

Re: I need help with project template styles

Post by bunnycat »

TR Lisa,

Interesting that it didn't change what you needed. I utilized the exact code from Soledad templates to make my panels. Just adjusted the div.home-tiles > div class so that it turned the cards white background with a red top border:

Code: Select all


div.home-tiles > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 300px;
	background-color: rgba(255, 255, 255, 1);
	border-top: 5px solid #c92235;
	/* background-color: rgba(0, 0, 0, 0.85); */
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 11.5px;
	padding-right: 11.5px;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	overflow: hidden;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
If you altered the div.home-tiles class itself, yes, it would give you the black tiles on a grey background.
TR Lisa
Sr. Propeller Head
Posts: 100
Joined: Thu Jul 06, 2017 8:09 am

Re: I need help with project template styles

Post by TR Lisa »

Interesting. I don't know how to update div.home-tiles > div. This is what I see. (attached, I hope)
temp_flarestyleissue.png
You do not have the required permissions to view the files attached to this post.
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: I need help with project template styles

Post by Psider »

Scroll up to the top and look under (Complex Selectors). I think it should be there.
TR Lisa
Sr. Propeller Head
Posts: 100
Joined: Thu Jul 06, 2017 8:09 am

Re: I need help with project template styles

Post by TR Lisa »

Yep there it was, thank you. I don't understand what Complex Selectors are or how I would have figured out to look there, based on what I see in the XML and in the documentation.
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: I need help with project template styles

Post by Psider »

Complex selectors basically let you set styling on tags that occur in particular situations.

So this specific example is saying "inside a home-tiles div ( div.home-tiles ) when you find a direct child ( > ) that is a div ( div ) tag give it a black background"

The > makes sure only the first level tags are affected. e.g.

Code: Select all

<div class="home-tiles">
    <div>    <--this will get a black background
        <div>      <--this will get the normal div background
        </div>
    </div>
</div>
The name varies. Mozilla seems to just call them multiple selectors (and combinators for the symbols).
https://developer.mozilla.org/en-US/doc ... _selectors
And w3 schools is good for playing with the code to see what happens (although sometimes their information is wrong)
https://www.w3schools.com/css/css_combinators.asp
TR Lisa
Sr. Propeller Head
Posts: 100
Joined: Thu Jul 06, 2017 8:09 am

Re: I need help with project template styles

Post by TR Lisa »

Are there any tutorials that get in to styles at this level? I need to make several adjustments to the Soledad template and just do not have days upon days to spend figuring out these things. I thought looking at the style tags in the XML or inspector would help but it seems like those are only clues. Thank you!
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: I need help with project template styles

Post by Psider »

Have a look at the tutorials on the Mozilla site as they'll run you through the general principles of CSS and complex selectors/combinators.

There are also this Madcap post:
https://www.madcapsoftware.com/blog/201 ... templates/

And the top nav conversion tutorial. While it's aimed at people converting from tripane, there's detail about areas of the top nav projects you might need to concentrate on. I've linked partway in to the tutorial. The previous step goes through some details about customising the home page, so that might be useful too.
https://help.madcapsoftware.com/flare20 ... Styles.htm
TR Lisa
Sr. Propeller Head
Posts: 100
Joined: Thu Jul 06, 2017 8:09 am

Re: I need help with project template styles

Post by TR Lisa »

Psider wrote:Have a look at the tutorials on the Mozilla site as they'll run you through the general principles of CSS and complex selectors/combinators.

There are also this Madcap post:
https://www.madcapsoftware.com/blog/201 ... templates/

And the top nav conversion tutorial. While it's aimed at people converting from tripane, there's detail about areas of the top nav projects you might need to concentrate on. I've linked partway in to the tutorial. The previous step goes through some details about customising the home page, so that might be useful too.
https://help.madcapsoftware.com/flare20 ... Styles.htm
Yeah I'm way past the 5 ways to customize. What I need are the 50 ways to customize :) I'm finding that the learning curve of trying to use style info in Flare help and other CSS learning sites is steep, and I need to focus on content over style. So style needs to be easier. That's why I went with the template. I was hoping for detailed, template-specific style instructions. I want to leverage all the modern widgets and get it right the first time. Unfortunately figuring out how to style everything to get that look I want will take as much time as the content refresh that I have to pull off in a very compact time frame and with resources comprising me, myself, and I. I'll have to revisit all these style issues next week after I get through what will be an interesting demo of my sad looking project tomorrow.
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: I need help with project template styles

Post by Psider »

I just had a thought (maybe only 2017r3 and newer?).

Display the Formatting Window (button in the Style section of the Home tab). It'll show you the styles applied to whereever you've clicked and what is inherited from where. Some of the styles show help text (I think from comments in the stylesheet). You can also make changes directly in that window, or you can click to open the appropriate stylesheet.
TR Lisa
Sr. Propeller Head
Posts: 100
Joined: Thu Jul 06, 2017 8:09 am

Re: I need help with project template styles

Post by TR Lisa »

Psider wrote:I just had a thought (maybe only 2017r3 and newer?).

Display the Formatting Window (button in the Style section of the Home tab). It'll show you the styles applied to whereever you've clicked and what is inherited from where. Some of the styles show help text (I think from comments in the stylesheet). You can also make changes directly in that window, or you can click to open the appropriate stylesheet.
Thank you that does seem useful. Seems to have a bit more info than the other style inspector tools I was using, and being editable in the panel is nice. Much of it is still hieroglyphics to me but it's something I can build from. Clearly it will take time and a lot of experimentation to learn the intricacies of style manipulation. I really thought it would be easier. So rather than knock out the design and layout tasks in one chunk as I had planned, it looks like I need to focus on getting the content refresh done and tacking maybe one small style issue every day or two until it's right. My goal, besides a great looking help site, is to not end up with the snake pit of style sheets that I inherited in the project I'm replacing.
Michelle_Gardner
Propeller Head
Posts: 24
Joined: Mon Apr 14, 2014 10:22 am

Re: I need help with project template styles

Post by Michelle_Gardner »

Related to styles in the Soledad template, when I build my project, the tiles on the home page stack one on top of the other instead of sit side-by-side. I copied the following files and added them to my current project (therefore, I am not building on the Soledad template, but using aspects of it in my project):
- Home.htm
- HomePage.flmsp
- StylesForHomePage.css

In the XML editor, the formatting looks correct, the files are side-by-side. However, in Preview in HTML and my output, the tiles are stacked and stretch across the screen. Any ideas on why that would happen and how to fix it?
AlexFox
Sr. Propeller Head
Posts: 149
Joined: Thu Oct 19, 2017 1:56 am

Re: I need help with project template styles

Post by AlexFox »

Michelle_Gardner wrote:Related to styles in the Soledad template, when I build my project, the tiles on the home page stack one on top of the other instead of sit side-by-side. I copied the following files and added them to my current project (therefore, I am not building on the Soledad template, but using aspects of it in my project):
- Home.htm
- HomePage.flmsp
- StylesForHomePage.css

In the XML editor, the formatting looks correct, the files are side-by-side. However, in Preview in HTML and my output, the tiles are stacked and stretch across the screen. Any ideas on why that would happen and how to fix it?
You should definitely just upload an example output somewhere that people can inspect for you. Describing the problem is very unlikely to be able to help us to help you.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: I need help with project template styles

Post by NorthEast »

Just to check the obvious, have you tried expanding the size of the preview/browser window?
The tiles are in a responsive layout, so they'll be stacked if you're looking at them in a narrow screen width, i.e. they'll go from 4 columns down to 1.

If they're always in one column, my guess is that StylesForHomePage.css is not being included in the output.
If you've selected a Master Stylesheet page in your target, make sure you select Allow local stylesheets too - otherwise it'll exclude all stylesheets apart from the master.
Post Reply