Apparently simply one - how do I Fully Justify standard HTML paragraphs?

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
7/12/2010 6:45:35 PM
Gravatar
Total Posts 19

Apparently simply one - how do I Fully Justify standard HTML paragraphs?

Ok, this should be real simple but I just can't figure it.

I'm using Artisteer to create skin and although I have set the font typography to "fully justified", and the corresponding section in the style.css is set to justify:

.art-postcontent, .art-postcontent p
{
  text-align: justify;
  line-height: 125%;
}

Yet none of the HTML Content is justified. I'm guessing its overridden somewhere, but where?

7/12/2010 9:44:08 PM
Gravatar
Total Posts 2188

Re: Apparently simply one - how do I Fully Justify standard HTML paragraphs?

Hi,

The easiest way to figure this out is to use the FireBug plugin for FireFox. With it, you can select your text and view the applied styles.

If you aren't comfortable with using FireBug, post a link to your site and I'll take a look it to see what the problem is.

HTH,
Joe D.

7/13/2010 4:04:21 PM
Gravatar
Total Posts 19

Re: Apparently simply one - how do I Fully Justify standard HTML paragraphs?

Hey Joe, thanks for the Firebug tip - very usefull.

It appears as though <p> tag of the the content within an HTML block on a mojoPortal page (at least for one based on an Artiseer template), effectivly inherits from the ".art-layout-cell, .art-content-layout-row" section in the style.css file.

 

This is slightly differnt to the Aitisteer raw template (as seen in the page.html file) where the <p> tag in the main HTML text is actually inherits directly from using the main ".art-postcontent, .art-postcontent p" section in the style.css file.

It looks as the Airisteer uses the "layout" styles to further break up main text into columns, but even praragraphs placed in these section inherit directly from the ".art-postcontent, .art-postcontent p".

 

Is there any reason why the mojoPortal pages work in different ways to the real Airtiseer produced template, and is there anything to be overly concerned about with regard to how these styles get applied?

7/14/2010 7:15:13 AM
Gravatar
Total Posts 18439

Re: Apparently simply one - how do I Fully Justify standard HTML paragraphs?

If you identify some extra html markup rendered in the Artisteer html template that is not rendered in mojoportal then let me know specifically what it is or you could email me the Artisteer file and I will take a look. There have been a few cases where some designs render things I have not seen before and others have sent me the Artisteer file so I could see it and figure out how to support it. Someone else recently sent me an Artisteer design where we were missing something in the side bar navigation markup, possibly you are having the same issue. I've already fixed that one in our source code repository so it will be fixed in the next release of mojoportal coming soon.

This idea of inheritance is nonsense to me, I'm sure you know what you mean by that and it makes sense to you but I do not, so it is difficult to understand what you are saying or try to answer. It is just a matter of understanding css selectors and figuring out how to tweak the CSS in override files to solve any issues with rendering.  Html markup does not inherit from CSS, it can be selected by CSS selectors and then style rules can be applied using the selector. It is only a matter of figuring out how to select the markup you want to style. All one needs to be concerned about is making it look correctly like the Artisteer design.

Note that the style.css file is generated by Artisteer and we never modify that file, so it is exactly the same as the template. There may be things in other css files like style-artisteer-overrides.css or stylemojo.css that override the css in that file, but if there is anything in those files that causes unwanted effects it can be removed.

Hope it helps,

Joe

7/14/2010 12:34:13 PM
Gravatar
Total Posts 19

Re: Apparently simply one - how do I Fully Justify standard HTML paragraphs?

Cheers Joe.

By inheritance I mean that an HTML tag (i.e. <body>) can have a style applied to it via CSS. A second tag then placed within the <body> tag (i.e. <table>) will generically inherit the style form it parent Tag PLUS it can gain it own styles even overriding those applied to the parent. At least, that's how I thought it worked.

It seems to me that that way mojoPortal renders the HTML and the way Artisteer renders the HTML is just a little bit different, different enough to mean that different CSS styles are applied to seemingly the same tags (i.e. in my case the <p> tag). What I don't understand quite is why this happens. Although the style.css from Artisteer defines a styles for both the ".art-postcontent, .art-postcontent p" and ".art-layout-cell, .art-content-layout-row"" sections, my <p> tag is picking up the text-align style from the the later style in mojoPortal and the former in the Artisteer page.html.

 

I'm not sure if this make any more sense to you but here are some link to my test site. My test mojoPortal site can be found here and the Artisteer template should be found at here.

Let me know what you think

7/14/2010 12:44:43 PM
Gravatar
Total Posts 19

Re: Apparently simply one - how do I Fully Justify standard HTML paragraphs?

PS. I have ready altered the text-allign style in both selectors mentioned previously in the style.css file to justified. I can reset the selectors to the defaults if you like so you can see the difference if required.

7/14/2010 1:23:09 PM
Gravatar
Total Posts 18439

Re: Apparently simply one - how do I Fully Justify standard HTML paragraphs?

Hi,

The issue is that part of the page.html is the actual design and part is placeholder content that they have also styled. This part of the page.html is really placeholder content, in mojoportal actual content will come from the database but in the template they have some hard coded filler content.

<div class="art-content-layout overview-table">
                                                 <div class="art-content-layout-row">
                                                  <div class="art-layout-cell">

                                                      <div class="overview-table-inner">
                                                       <h4>Support</h4>
                                                        <img src="images/01.png" width="55px" height="55px" alt="an image" class="image" />
                                                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                                                        Quisque sed felis. Aliquam sit amet felis. Mauris semper,
                                                        velit semper laoreet dictum, quam diam dictum urna. </p>
                                                       </div>
                                                  </div><!-- end cell -->
                                                  <div class="art-layout-cell">
                                                    <div class="overview-table-inner">

                                                    <h4>Development</h4>
                                                        <img src="images/02.png" width="55px" height="55px" alt="an image" class="image" />
                                                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                                                        Quisque sed felis. Aliquam sit amet felis. Mauris semper,
                                                        velit semper laoreet dictum, quam diam dictum urna. </p>
                                                    </div>
                                                  </div><!-- end cell -->
                                                  <div class="art-layout-cell">
                                                    <div class="overview-table-inner">
                                                    <h4>Strategy</h4>


                                                        <img src="images/03.png" width="55px" height="55px" alt="an image" class="image" />
                                                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                                                        Quisque sed felis. Aliquam sit amet felis. Mauris semper,
                                                        velit semper laoreet dictum, quam diam dictum urna. </p>
                                                              </div>
                                                  </div><!-- end cell -->
                                                 </div><!-- end row -->
                                                </div>

So that art-content-layout-row stuff is not really part of the design skeleton, it may be styled different or more specifically, you could create a mojoPortal content template with some of that if you want to be able to re-use it easily, but really,

.art-postcontent, .art-postcontent p
{
  text-align: justify;
  line-height: 125%;
}
 should be sufficient to justify the paragraph, if not you could always add this into stylmojo.css:

 p
{
  text-align: justify;
  line-height: 125%;
}
if you want to justify all paragraphs.

There is not really much in CSS that is like inheritance, there is a cascade of style rules where the closer the rule is to the actual element or the lower the rule in the CSS file the more important the rule is. Some things might give the impression of inheritance, like if you set fonts on the body {} it will use those fonts unless there is a more specific rule somewhere for other elements, but say if you put a border on the body or a div that is not going to put a border on contained elements. So the way to think of it is the specifity of the rule and the cascade of rules.

Hope it helps,

Joe

7/15/2010 2:23:29 AM
Gravatar
Total Posts 19

Re: Apparently simply one - how do I Fully Justify standard HTML paragraphs?

Hi Joe,

Where you say,

So that art-content-layout-row stuff is not really part of the design skeleton, it may be styled different or more specifically, you could create a mojoPortal content template with some of that if you want to be able to re-use it easily, but really,

.art-postcontent, .art-postcontent p
{
  text-align: justify;
  line-height: 125%;
}
 should be sufficient to justify the paragraph, if not you could always add this into stylmojo.css:

 

I would have though this to be true. This is the style selector that Artisteer uses to style the main body of text. However, in mojoPortal this is NOT the case. mojoPortal use the following selector in style.css to style the main body text:

.art-layout-cell, .art-content-layout-row {
   background-color:Transparent;
   border:medium none !important;
   margin:0 !important;
   padding:0 !important;
   text-align:left;
   vertical-align:top;
}
 
This is the original styles that came out of Artisteer. I change the underlined section to 'justify' in order to get the main body to justify. However, mojo portal then justifies ALL text blocks, not just the main body, but also the sidebar sections.

I have changed the style.css back to normal now and you can see from the links above the the Artisteer template shows that the main body is justified whilst the sidebar text remain unjustified. In the mojoPortal page, everything remains unjustified as all text no mater where it is placed is being controlled by the .art-layout-cell...... selector.

 

7/16/2010 7:24:28 AM
Gravatar
Total Posts 18439

Re: Apparently simply one - how do I Fully Justify standard HTML paragraphs?

Hi,

All the CSS comes from the CSS files or some may be applied by the javascript that comes from the Artisteer template so it is not true that mojoportal uses something different than what is in the CSS files. And we do not touch the style.css file produced by Artisteer.

If there is any style being applied it comes from the CSS produced by Artisteer style.css or from other CSS files listed in the style.config that provide supplemental and overrides to tweak things as needed. If you find something in any file that is causing something you don't like you can edit the file.

I think part of the cause of issues you are having is you used a 2 column Artisteer design. As mentioned in the tips in the documentation, you should use a 3 column layout to make sure Artisteer includes styling for all columns.

Hope it helps,

Joe

7/16/2010 7:36:38 AM
Gravatar
Total Posts 18439

Re: Apparently simply one - how do I Fully Justify standard HTML paragraphs?

I would not edit the style.css file, I would override it as needed to solve any issues.

Like for example instead of changing the underlined thing in style.css, just use style-artisteer-overrides.css and add

.center-rightandleftmargins p, .center-leftmargin p, .center-righmargin p, center-nomargins p

{ text-align:justify;}

or just use

p {text-align:justify}

then add

.leftside p, .rightside p { text-align:left;} so it doesn't affect the left and right sides.

Hope it helps,

Joe

7/16/2010 11:55:37 AM
Gravatar
Total Posts 19

Re: Apparently simply one - how do I Fully Justify standard HTML paragraphs?

Hi Joe,

Sorry I must have misinterpreted the documentation. In the "Tips for Working with Artisteer" section on the document page you have link me to, it says:

Note that Artisteer templates typically allow layout of 1 or 2 or 3 columns. In mojoPortal our skins support automatic adjustment from 1 to 3 columns depending on where you place features on a page. To make sure your Artisteer template has the needed CSS ingredients to support from 1 to 3 columns, I recommend you always use a 2 column layout in Artisteer with a left column and a wide center section.

It seems to state above that we should use a 2 column layout design in Artiseer, not the 3 column you suggest in your previous post. Maybe it is worth updating this tip to reflect this.

 

I will have ago at the overrides thing however as it looks like I might be able to control main body content and side body content separately as is achieved in the Artisteer template. Personally, I'm not bothered how the effect gets achieved, I just trying to understand what is going on in order to get the job done.

You must sign in to post in the forums. This thread is closed to new posts.