Jump to content

Archived

This topic is now archived and is closed to further replies.

nfp1900

styling text in a text box

Recommended Posts

nfp1900    29
nfp1900

I have a design to work to for the title part of this site but I can't get the styling to work. The client thinks there is too much white space/padding around the 'Welcome'  and the body copy and wants this all tightened up:  http://oraclecancertrust.org.gridhosted.co.uk/

 

This is the html I've used in the Text Content field of the textbox:

 

<h2><span style="color: #009089;">Welcome</span></h2><strong>At Oracle Cancer Trust we aim to maintain and improve the best survival rates and ensure our treatments and clinical practices preserve the senses.</strong>
<p>The Head & Neck Cancer Unit at the RMH was the first multidisciplinary unit in the country established in the 1960s, and is dedicated to the investigation and treatment of head and neck cancer. The Unit is also the largest centre dedicated to the management of head and neck tumours in the UK with around 400 new patients being referred each year.</p>
 
Padding to set to 0px 0px and the Textbox font size isn't selected. What's the best way to fix this, it should be easy...

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

HI,

 

Are you referring to the space between the Welcome header and the text below ?

 

If so, first you have the following HTML, which doesn't appear to be doing anything: http://d.pr/i/4EiN

 

<p><strong></strong></p>

 

So you should remove this, as there isn't any point to it.

 

Secondary, if it is the space between the Welcome header and the text below, the gap/space is created by the headers margin, you will simply need to remove the bottom margin.

 

You can do this by using one of the utility classes and add it to the header via class. For example:

 

<h2 class="zmb">Welcome</h2>

 

The .zmb class stands for zero margin bottom, you can see more info here - http://docs.pagelines.com/tutorials/html-css-utilities

 

Also if you view your sites code in Google Chrome, when you hover over elements you can differentiate between margin and padding by the color, in Chromes web dev tool Margin is orange and padding is green.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900    29
nfp1900

Thanks Danny -  I added both  zmt and zmb which did the trick. 

 

The strong tag is wrapped around the first paragraph and works ok, maybe it's my dirty html!

Share this post


Link to post
Share on other sites
Rob    547
Rob

All that counts is that it works.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • Similar Content

    • Claudio
      By Claudio+
      I have a problem with the typography settings. I set the H1 class with "font-weight: 300;" (Very thin weight), and "font-size: 50px;" (To have considerable evidence of my problem). Unfortunately, as you can see on the screenshots, those setting don't have any incidence on the site, Infact in the home page editor there is a trial title called "Text test", bold, and 26 px approximatly sized.
      Why the typography settings are not transposed on the site? Where I wrong?


    • Barnaby Skinner
      By Barnaby Skinner+
      Hey team,
      Really simple question: where would I add code to a specific page header? I can see in the settings I can add code to the global header, but can't see how to do it for a single specific page. It's related to facebook pixel tracking
      Cheers
    • John Olsson
      By John Olsson+
      I have a problem with the regular textbox in pl5, in this case, the text goes in that container, but it will hide som of the text, as if the container itself won't fit?
      Is this some kind of bug or have I done something stupid, never happend before with pl5 doh, can I do something smart about it?
      Version: Version 5.0.108
      Look here: www.gastronova.co56.se

    • dymond
      By dymond+
      Ahhh I screwed up. I was ALMOST DONE with my website, and tried adding a mailchimp js pop up form on the home page with this code mailchimp gave me for the pop up:
      <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us12.list-manage.com","uuid":"d136d5c71f4509140650ecf70","lid":"ab22ff149a"}) })</script>
       
      However, instead of adding a pop up it applied to the entire home page so now when I go to page to delet the code, I can;t... I get the stupid pop up and all i see is ablank page... please can someone out there help? Thank you! i have no idea where to manually find the code so I can delete it. I added a PL5 section "html" and dropped it in there...
      www.purplerosedesigncenters.com
       
       

    • Barnaby Skinner
      By Barnaby Skinner+
      Hey all,
      I've been trying to justify the base font in PL5 with the Framework theme, but in doing so it's thrown a curve ball; it seems the font styling used by many of the PL5 Element sections (masthead etc) is overriding the global CSS.
      I set the base font style to justified in the Typography backend panel, and it seems to only apply to the base font used in standard Text sections, not to the base font used in text boxes within Element sections, could be others too, but not checked.
      Can we override this? It seems odd to have to (somehow) apply justification many times to different containers using the same base font, right?
      Also - I tried to add the CSS font-variant: small-caps; to the H3/4/5/6 CSS field in Typography panel, and again nothing happens, this time not even in Text sections!
      Confused I am! Please help...
      Cheers
      Barney
×