2

My page is designed with display suit layout. Once I click the printer friendly link, I do get the print page.

In print module settings, I have entered custom css path > which is themes/bartik/css/pf.css. This pf.css file is now pointing to print page.

On the print page, I am trying to shift the content to the middle and all the texts aligned to center or left. Entire content does not shift to the middle (some does), it does set the background color to silver (good), setting the width to 800 (good), and some of the fields text-aligned to center.

The css for the content is:

.print-content {background-color: silver; text-align: center; width: 800px;}

If you click the print link on this page, you will probably see the problem.

Many thanks, D


Thank you. It worked just fine. But I see some other problems. If you please visit my page and then click print, you will see some bullet points outside the content, image not centered. I added picture as well. Thanks. enter image description here


Thank you for your help. I made progress. It seems to me still need help.

  1. Print page has a field value "This is some text". How can I write css which only point to this text? I used 'field-items' class which is pointing to all the field items. I do not know how i can write css that will point to this field item only. enter image description here

Below is the html from view source

<div class="group-header">
    <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" 
property="content:encoded"><font color="red">This is some text!</font> 
<span class="print_html"><a href="http://www.bettylist.com/ac/print/12" title="Display a printer-friendly version of this page." class="print-page"
 rel="nofollow"><img class="print-icon print-icon-margin" typeof="foaf:Image" src="http://www.bettylist.com/ac/sites/all/modules/print/icons/print_icon.png" 
width="16px" height="16px" alt="Print" title="Print" />Print</a></span></div></div></div><div class="field field-name-field-img-galary 
field-type-image field-label-hidden">
<div class="field-items"><div class="field-item even"><div id="field-slideshow-1-wrapper" class="field-slideshow-wrapper">
  1. How to center only the first image? I have written few css and none worked:

Below is css I wrote and none worked:

.print-content .field-slideshow{ margin-left: auto; margin-right: auto; }

   .print-content .field-slideshow-slide{
  margin-left: auto;
  margin-right: auto;
} 

.print-content .group-header{ margin-left: auto; margin-right: auto; }

.print-content .field-slideshow-image{ margin-left: auto; margin-right: auto; }

.print-content .field-slideshow-image-1{ margin-left: auto; margin-right: auto; }

Below is the html from view source:

>     <div class="field-slideshow field-slideshow-1 effect-fade timeout-4000 with-pager with-controls" style="width:480px;
> height:270px">
>           <div class="field-slideshow-slide field-slideshow-slide-1 even first">
>         <img class="field-slideshow-image field-slideshow-image-1" typeof="foaf:Image"
> src="http://www.bettylist.com/ac/sites/default/files/styles/large/public/0cda68f4-ae37-470d-8ec1-e080a810948f1334430310.jpg?itok=oTavzRzD"
> width="480" height="270" alt="back side" />                  <div
> class="field-slideshow-caption">
>             <span class="field-slideshow-caption-text"><a href="http://www.bettylist.com/ac/sites/default/files/0cda68f4-ae37-470d-8ec1-e080a810948f1334430310.jpg"
> class="colorbox" rel="field-slideshow[nid-1272]caption" title="back
> side">back side</a></span>
>           </div>
>               </div>
>           <div class="field-slideshow-slide field-slideshow-slide-2 odd" style="display:none;">
>         <img class="field-slideshow-image field-slideshow-image-2" typeof="foaf:Image"
> src="http://www.bettylist.com/ac/sites/default/files/styles/large/public/1f80f93a-80fc-4c06-b26d-988d19f29e20367217229.jpg?itok=O5N34NS2"
> width="480" height="270" alt="driver seat" />                  <div
> class="field-slideshow-caption">
>             <span class="field-slideshow-caption-text"><a href="http://www.bettylist.com/ac/sites/default/files/1f80f93a-80fc-4c06-b26d-988d19f29e20367217229.jpg"
> class="colorbox" rel="field-slideshow[nid-1272]caption" title="driver
> seat">driver seat</a></span>
>           </div>
>               </div>
>           <div class="field-slideshow-slide field-slideshow-slide-3 even" style="display:none;">
>         <img class="field-slideshow-image field-slideshow-image-3" typeof="foaf:Image"
> src="http://www.bettylist.com/ac/sites/default/files/styles/large/public/4f29a8f0-f99e-40db-81f7-9ec35de1f5cb-1833362688.jpg?itok=-Vk6N_pV"
> width="480" height="270" alt="left side" />                  <div
> class="field-slideshow-caption">
>             <span class="field-slideshow-caption-text"><a href="http://www.bettylist.com/ac/sites/default/files/4f29a8f0-f99e-40db-81f7-9ec35de1f5cb-1833362688.jpg"
> class="colorbox" rel="field-slideshow[nid-1272]caption" title="left
> side">left side</a></span>
>           </div>
>               </div>
>           <div class="field-slideshow-slide field-slideshow-slide-4 odd" style="display:none;">
>         <img class="field-slideshow-image field-slideshow-image-4" typeof="foaf:Image"
> src="http://www.bettylist.com/ac/sites/default/files/styles/large/public/39cf741a-79bd-4746-88d6-16987655448e1587974190.jpg?itok=WWnhZOUO"
> width="480" height="270" alt="front side" />                  <div
> class="field-slideshow-caption">
>             <span class="field-slideshow-caption-text"><a href="http://www.bettylist.com/ac/sites/default/files/39cf741a-79bd-4746-88d6-16987655448e1587974190.jpg"
> class="colorbox" rel="field-slideshow[nid-1272]caption" title="front
> side">front side</a></span>
>           </div>
>               </div>
>           <div class="field-slideshow-slide field-slideshow-slide-5 even last" style="display:none;">
>         <img class="field-slideshow-image field-slideshow-image-5" typeof="foaf:Image"
> src="http://www.bettylist.com/ac/sites/default/files/styles/large/public/ab5b5a9c-2ce1-4590-b926-99d648273cf6-1368514049.jpg?itok=PRgQxJiV"
> width="480" height="270" alt="front side" />                  <div
> class="field-slideshow-caption">
>             <span class="field-slideshow-caption-text"><a href="http://www.bettylist.com/ac/sites/default/files/ab5b5a9c-2ce1-4590-b926-99d648273cf6-1368514049.jpg"
> class="colorbox" rel="field-slideshow[nid-1272]caption" title="front
> side">front side</a></span>
>           </div>
>               </div>
>       </div>

Many thanks, D


With your help I made a lot of progress. It seems to me I am weak on css and I will definitely work on it. Below code did center the text:

.print-content .field-name-body .field-items {
    margin-left: auto;
    margin-right:auto;
}

Using the above solution, i tried to center the image field slideshow and below did not work. Please help.

    .print-content  .field-slideshow-slide
    {
     margin-left: auto; 
    margin-right: auto; 
}
    .print-content  .field-slideshow-slide .field-slideshow-image
    {
     margin-left: auto; 
    margin-right: auto; 
}

Thanks.

closed as off-topic by rooby, Krishna Mohan, sanzante, Free Radical, Clive Apr 6 '15 at 22:33

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on programming, PHP, SQL, etc. that do not relate directly to Drupal are off-topic here, but can be asked on Stack Overflow." – rooby, Krishna Mohan, sanzante, Free Radical, Clive
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Sorry, but you'll probably have to provide some more information about the actual problem. First thing I would do is to make the grey (silver) background white – but if I understood you correctly that is actually on purpose? – tillinberlin Apr 1 '15 at 22:25
  • I already gave the actual problem. I made silver background as a test. This is not actual design. Could you please help how I move the entire content to center? If you have any specific question please let me know. Thanks. – learn4ever Apr 2 '15 at 1:14
  • Updated my answer. – Zuzuesque Apr 2 '15 at 16:44
  • Aigan edited - but this is not actually a Drupalquestion – Zuzuesque Apr 3 '15 at 10:45
  • Using photoshop or paint, just draw what you need and put it in your question – M a m a D Apr 3 '15 at 20:22
2

You are using text-align in your code, however, as the name implies, text-align is dealing with the alignment of text within a container - and not the container itself.

To center a container (like your print-content div), you will need to add 'margin-left: auto' and 'margin-right: auto' to the element you want to center. This is the most common approach to center block level elements and works in all CSS2 capable browsers (= basically every modern browser).

So your css should look like this:

.print-content {
    background-color: #C0C0C0;
    text-align: center; //only if you want to center the text as well
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

Edit:

To center the image: you can use margin-left: auto + margin-right:auto in this case as well. It is not enought to add it to the parent container, you need to add it to any child you want to center relativ to its parent container.

To get the bullet points into the gray area use a margin-left on the li elements of the list. 15px should probably do.

I am not sure what you mean with fixed with. Your two columns currently have a fixed width - its 50%.

Edit2:

Again, you can center elements in their parent containers using margin-left: auto + margin-right:auto. In this case you center the field-items div within the field-name-body div. So:

.field-name-body .field-items {
    margin-left: auto;
    margin-right:auto;
}

You can not remove the slideshow using css alone. You can hide an image, but then it would still slide, just showing the blank background instead of an image. You will need to turn off the slide show in your view.

  • I updated my question. I still need help. Thank you so much for your time. – learn4ever Apr 2 '15 at 21:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.