Single image styling

Permalink
Hello. I am almost finished making my very first Concrete5 site:)

http://www.anakwaana.com/akatest...

I am wondering if single images added to a content block (together with text) can be styled as I please. For instance, I want most images to have a drop shadow, and on the "who are we" page, I want the portrait photos of the members to look like a polaroid.

Is it possible to style this in default.css and somehow choose the appropriate style in when I add text and images in the content block?

djoniba
 
PineCreativeLabs replied on at Permalink Reply
PineCreativeLabs
Have you tried this cool add-on: Designer Content?

http://www.concrete5.org/marketplace/addons/designer-content/...

It allows you to create your custom blocks and you can define custom styles for each block.

It might help you with what you're trying to do.
Steevb replied on at Permalink Reply
Steevb
You could add image then text, click HTML button and add a class to the image.

You might also want to put a margin around the image to clear the text, depends on the theme styling already in place.

CSS:
.drop {box-shadow 1px 1px 5px #000}

.who {border-left:10px solid #FFF; border-top:10px solid #FFF;border-right:10px solid #FFF;border-bottom:30px solid #FFF;box-shadow 0 0 15px #000}

Html if chosen from file manger:
<img class="who" src="/files/3210/2222/5432/who.jpg" alt="who.jpg" width="300" height="200" />

HTML if chosen from image folder:
<img class="drop" src="<?=$this->getThemePath()?>/images/one.jpg" width="300" height="200" alt="one" >

<img class="who" src="<?=$this->getThemePath()?>/images/who.jpg" width="300" height="200" alt="who" >

Hope that works out for you.
djoniba replied on at Permalink Reply
djoniba
Great response. Very happy to be part of the "Concretegation" (tried a little wordgame)

I will try to ad class in html view. But if I want this to happen automatically when the user updates or write a blog, I guess I have to go for Designer Content. Am I right?
djoniba replied on at Permalink Reply
djoniba
Tried it. Adding to html didnt work.

Lets see if I did it right: I added the two classes to my default.css file.

Then I loaded an image from the file manager and added the class to the link. Like so:

<img class="drop" src="/akatest/index.php/download_file/view_inline/17/" alt="anakwaana3.JPG" width="300" height="200" />


The image is there, but no drop shadow
JohntheFish replied on at Permalink Reply
JohntheFish
This is not a cheap option, but you could use my newly released addon Style Quickie http://www.concrete5.org/marketplace/addons/style-quickie/... to target specific styles to a css selector for the image(s). As an addon, its overkill for what you need. It all depends on how you account cost vs time and whether you would have other uses for it. (Keep an eye out for tomorrow's deal of the day if interested)
Steevb replied on at Permalink Reply 1 Attachment
Steevb
Whoops!

Typo in css, need a colon after box-shadow ':'

Sample of my way attached.

If you need to style separately for users you might then be better off with setting up the 'Designer' block.
Steevb replied on at Permalink Reply
Steevb
You could also target classes in the theme or concrete core with your css.

For example you could target member avatar 'img class="u-avatar"'

CSS:
.u-avatar {box-shadow:5px 5px 5px #000;}

Or the image block 'ccm-image-block'
djoniba replied on at Permalink Reply
djoniba
Another typo was a dot in front of the word drop, like this .drop

Now it works. Thank you :)
Steevb replied on at Permalink Reply
Steevb
The dot is a reference to a class, you will need it.

The hash is reference to an id.

.class{} - #id{}

<div class="class"></div>

<div id="id"></div>
djoniba replied on at Permalink Reply
djoniba
All your help is invaluable. I actually changed the drop CSS a litte.
Found a great website:http://www.wordpressthemeshock.com/css-drop-shadow/...

Thank you, thank you, thank you