CSS

Tweaking the theme in Drupal 7 (Bartik/Antonelli) themes

Submitted by Diliny C.
on Wednesday, 24th August 2011 - 15:12
themes
bartik
antonelli
Drupal 7.x
CSS

I wanted to edit the layout of my images such that content images have a border and non-content images (i.e. ye wee little pdf file symbol for starters) would stay the same (no border).  See below snippet of code from my style.css file in bartik_sch sub theme.  Note: I also have a views random image generator on the front page and I want those images to be also with the same border format.

in the bartik styles.css file define the img particular to ".field-type-image img" for images that are a content type.  The way to find the exact div class reference is to use firefox's firebug.  Simply 'inspect' the page element that you're interested in.  In the example below, I wanted to find the reference to the random image generator image.  You generally have to scroll up until you find the appropriate 'div' tag. 

This technique can also be used to personalize the menu elements, logo, etc.  Incidentally, before starting I copied the bartik file to bartik_sch as a working subtheme.  If doing this, make sure that all of your *.info files have reference to the correct files.  

.field-type-image img,
.user-picture img, .view-random-image img {
 margin: 0 0 1em;
 background-color: #E3D8B7;
 border: 1px solid #C8BEA1;
 margin-let: 12px;
 padding: 7px;
}

    

    
        
        
  


  
  


  

  

    

    
    
  

              
Is there any way to display a round image in Drupal?

        
          

        
Submitted by Diliny C. 

        
on Monday, 6th June 2011 - 22:54

      

    
    

      

    

          
      

      
      

      




Drupal 7
CSS
Php
themes
What I would like to do is the following. However, its proving to be incredibly tricky in Drupal.
 
<div class="round-image" 
style="
width:200px;
height:200px;
border:1px solid #fff;
-moz-border-radius:200px;
-webkit-border-radius:100px;
background:url(http://d6.ahasaetharu.net/sites/default/files/images/grass.thumbnail.jpg)">
</div>
So in the end, we found how the image is called in Drupal 7 - in this case 'field-blog-image'. Created a file called field--field-blog-image.tpl.php in the theme directory.
<?php?>
<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
  <?php if (!$label_hidden) : ?>
    <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div>
  <?php endif; ?>
  <div class="field-items"<?php print $content_attributes; ?>>
    <?php foreach ($items as $delta => $item) : ?>
      <div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"
                                                      <?php print $item_attributes[$delta]; ?>><?php 

      $image_url = image_style_url("thumbnail", $item['#item']['uri']);?>
      <div class="round-image" style="width:200px; float: right; height:200px; 
 border:0px solid #333333; -moz-border-radius:200px; -webkit-border-radius:200px; 
 background:url(<?php print $image_url;?>); background-repeat:no-repeat; 
background-position:center; background-size:200px;"></div>
      
      </div>
    <?php endforeach; ?>
  </div>
</div>

Reference: http://api.drupal.org/api/drupal/modules--image--image.module/function/image_style_url/7