SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75!  1
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Within a Page definition - how to pad photos

6 years 1 month ago #116656 by jcross
Within Structure->Page->User Profile Template I changed the status from Enabled to Edit, and created a variant that allows a much nicer presentation of profile information.

I created a field within the user profile to hold an unlimited number of photos. At the bottom of the User Profile display I'm able to display those photos - GREAT!!! But what I need to do is add some spacing between the photo's and not have them all strung together.

I'm guessing CSS? If so how would I go about injecting CSS code to pad and what would that CSS code look like? Or is there a better way?

Thanks!

Please Log in to join the conversation.

6 years 1 month ago #116672 by steve
Hi jcross

The CSS could be as simple as this:
.photos{padding:10px;}

That would at 10px to the photos on every side.

The key is finding out what CSS classes are being used. It problably won't be as simple as "photos".

Please Log in to join the conversation.

6 years 1 month ago #116685 by jcross
I installed the module Live CSS to see if I can isolate the code - not having much success. It would seem Drupal would need to wrap this code around every photo as it's moved from the DB to the display. I'll continue to research.

Please Log in to join the conversation.

6 years 1 month ago #116695 by Valentin
Replied by Valentin on topic Within a Page definition - how to pad photos
Hi jcross,
Let us know if we can be of any help.

If possible share a link of this site to see the current progress.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

6 years 1 month ago #116703 by jcross
I'm developing this site on a VM running on my ESXi cluster I have at home. I'm hoping to publish the site sometime in November. I'm a newbie to Drupal and as such I'm going through the painful learning curve to understand Drupal and build my site.

Sorry!

Please Log in to join the conversation.

6 years 1 month ago - 6 years 1 month ago #116708 by jcross
See the attached screen shots.

I added .Photos to the CSS Class, then went and added:

.Photos {
padding: 25px;
}

To CSS - but it appears to be filtered out because when I do a "View Source" and see the underlying HTML/CSS I'm not seeing the padding statement anywhere,

Am I doing this the correct way - or am I on the wrong track...

This message has attachments images.
Please log in or register to see it.

Please Log in to join the conversation.

6 years 1 month ago #116726 by Nick
Hi jcross,

When you're configuring the CSS on Field Pictures (screenshot CSS2.jpg), remove the dot. You should just use "Photos" there.

After saving, clear your browser cache and refresh the page.

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

6 years 1 month ago #116730 by jcross
I removed the "." from both CSS2 and CSS3 screen shots

Still no go

I'm using the "Insepct element" tool within IE - I'm drilling down into the style.css and I am able to find the code that controls that area of the screen. Padding of 1 or 2px seems to help - now I have to find the file containing the code to see if this is the route to take.

Please Log in to join the conversation.

6 years 1 month ago #116734 by jcross
I can alter the code is style.css but that affects the whole site....so back to trying to find a way to apply the code within Panels.

Please Log in to join the conversation.

6 years 1 month ago #116740 by Nick
Hi jcross,

The dot should only be removed from the CSS2 screen, but it should be kept in the CSS3 screen. Then it should work for you.

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

6 years 1 month ago - 6 years 1 month ago #116741 by jcross
Still no go....

Here is what I see doing a View Source:

</ul><span class = "panels-ipe-dragbar-admin-title">"User being viewed" Pictures</span><span class="panels-ipe-draghandle-icon"><span class="panels-ipe-draghandle-icon-inner"></span></span></div></div><div class="panels-ipe-portlet-content"><div class="panel-pane pane-entity-field pane-user-field-pictures Photos" >

You can see at the end of above line that the Photos Class is indeed there. But doing a search for the CSS code comes up empty. Even doing an Inspect Element shows only the CLASS within the code.....no CSS. Do I need to wrap any additional CSS code around the code shown in screen CSS3 to get this to work?

There is a note at the bottom of the CSS3 screen that notes some CSS is filtered for safety so some CSS may not work.

Please Log in to join the conversation.

6 years 1 month ago #116742 by Nick
Could you provide the link to the page?

Looking forward to helping.

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

6 years 1 month ago #116756 by jcross
Wish I could but the site is currently under development and resides on a server in my basement.

I've been reading the forums and this problem has been around for awhile and many people have reported it. I may just have to go into the style.css file and fix it there (I did isolate the lines of code that pertain to the area on the page I'm having issues).

Please Log in to join the conversation.

6 years 1 month ago #116768 by Nick
Hi jcross,

OK, in this situation, adding the CSS yourself is your best bet.

Try leaving the code there that's in CSS2.jeg and use the following in your CSS:
.panel-pane .pane-entity-field .pane-user-field-pictures .Photos {
padding: 25px;
}

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

6 years 1 month ago #116770 by jcross
I added the code (see attached) - nothing

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

6 years 1 month ago #116772 by Valentin
Replied by Valentin on topic Within a Page definition - how to pad photos
Hi jcross,

Be sure to clear cache: www.ostraining.com/blog/drupal/cache-drupal-7/
See if makes any difference

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

6 years 1 month ago #116864 by jcross
I did clear cache - no difference.

What I did do to get this working is modify the style.css code:

/** General **/

* {
margin: 0;
}

html {
overflow-y: scroll;
}

html, body {
height: 100%;
}

body {
text-align: left;
font-family: 'Droid Sans', sans-serif, Helvetica, Arial;
font-size: 0.8em;
line-height: 1.5em;
color: #bbb;
background-color: #000;
}

a {
color: #019cff;
text-decoration: none;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
/** padding-right: 4px; **/
padding-right: 4px;
}

It's not perfect and what you have suggested and what I have tried should work. But after reading some of the forum discussions on drupal.org this is a know issue.

Please Log in to join the conversation.

6 years 1 month ago #116865 by steve
Ah, thanks, jcross. I'm glad you were able to see it was an issue, rather than a mistake on our end or your end.

All in all, it's best to put the CSS in the style.css file if possible. Code in there can be much more easily backed-up and also found. Putting CSS into the admin area is easier, but definitely not best practice.

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!