Hello,

I use TinyMCE and IMCE to upoad images. Whenever I insert right aligned images or underlined text, it wont work. Images remain left aligned and text never becomes underlined. Bold and italics does work however.

Thank you.

CommentFileSizeAuthor
#12 Marinelle center.jpg40.39 KBavader

Comments

Lioz’s picture

Assigned: Unassigned » Lioz

Hi KuriKuri.
I think that using the attribute align in xhtml strict documents is deprecated. Try adding a class instead. For example if you wish to have a right-aligned image apply a class="destra" to your image, in the css this rule is already declared.


#primary .singlepage img.destra { 
	margin: 0 0px 0px 15px;
	padding: 4px;
	border: 1px solid #ccc;
	float: right;
}

tell if this solution solves the problem!

kurikuri’s picture

Thank you for your feedback. Where would I add this class in TinyMCE?

Lioz’s picture

i think that any editor supports this feature: Look into the appearance tab in the image menu.

Lioz’s picture

Status: Active » Fixed
gostram’s picture

I am trying to solve this issue and I can't really figure it out.

do I need to tell TinyMCE to use the styles.css from the Marinelli theme and then add the destra class in the appearance tab?

Let me know if I ask stupid questions :) I just can't seem to figure out what seems to be like a very simple solution. I would almost need a step-by-step explanation, but if you could point to a few hints, that would already be great.

Thanks all and again, congratulations on the template

gostram’s picture

Sorry forgot to mention, that basically you can see what I am trying to do here: "PYRN activities"

Basically I would like to get the image at the bottom to show up on the right side of the text. It has been my main frustration since two weeks.

gostram’s picture

I figure it out to align things to the right and used the destra class. I also created a sinistra class for align left, with same design.
the issue remains for "align center" fo images
I've tried several things including putting the image in a block and then use text-align=center as a style in the styles.css file, but it won't align my images in the center. I've looked everywhere on google without much success. any idea how this could be fixed?

Thanks in advance for your answers. The poblematic page is here: http://pyrn.ways.org/activities/pyrn-meetings/2007-saint-petersburg

Lioz’s picture

maybe you can try with another class

#primary .singlepage img.center {
display:block;
margin: 0px auto;
padding: 0px;
border: none;
}

let me know!

gostram’s picture

thanks for the feedback Matteo, I'Ve got a center class already:

#primary .singlepage img.center {
	margin: 0 15px 0px 15px;
	display:block;
	padding: 4px;
	border: 1px solid #ccc;
	float: inherit
}

</div>

Slightly different than yours, is the issue the missing "auto" in my CSS class?

gostram’s picture

I've cleaned the page, started from scratch, assigned the center class to the picture and... ..nothing. IT stays as it is.

I also switched the CSS class setting in TinyMCE to tell TinyMCE to use the theme CSS class, and that is where I added the center style.

I don't know if any other Marinelli user ran into the same issue, but that would help me.

Thanks.

Anonymous’s picture

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.

avader’s picture

Status: Closed (fixed) » Active
StatusFileSize
new40.39 KB

Has anyone found a solution for this problem? I'm having the same troubles. When adding an image in a post (TinyMCE) the center command is completely ignored. I'm seeing the same effect in the Gallery2 module I integrated, all the images are aligned left (I added a screenshot), when I switch to another theme it looks fine so I guess it has someting to do with the Marinelli CSS?

gostram’s picture

Nope I gave up.
What I do is that I create images with white margins so that they are artificially centered. But that is obviously a very painful method.

I am sure there is a simple method, but I haven't found it

avader’s picture

I changed "float: left" in the style.css file to "float: center":

#primary img { 
	margin: 0 15px 0px 0;
	padding: 4px;
	float: center;
	position:relative;
}

The images are displayed centered now. But by changing this I created a new problem: the avatars are still displayed on the right side but above the text, the text is not outlined around the avatar image anymore. Already tried some modifications to the avatar-section in the CSS file but without any luck. Anyone?

avader’s picture

OK, fixed the avatar problem also. Just change the:

/*avatar*/

.picture{
float:right;
margin:0 0 4px 5px;
}

.picture img{
float:right;
margin:0 0 4px 5px;
padding:0px;
border:0px solid #ccc;
}

to:

/*avatar*/

.picture{
float:right;
margin:0 0 4px 5px;
}

.picture img{
align:right;
margin:0 0 4px 5px;
padding:0px;
border:0px solid #ccc;
}
research37’s picture

Avader's comments here worked great for me!

Lioz’s picture

Status: Active » Closed (won't fix)