Basic formatting of words to the side of a picture
Permalink
Hi,
I appreciate I am very new to concrete5, but I was wondering what was the easiest way of aligning text neatly to the right of an image in a content block (and if that is the correct way of doing it)?
If you navigate tohttp://www.apmwoodflooring.co.uk and then click on "Solid wood" you'll see my attempt at aligning images and text which shows my current basic skills with concrete5 (coming from Word Press).
Do I need to create a 2x column layout with an image block in the left column and a content block in the right one, and then position the text t align with the top of the image?
Thanks in advance
Richard
I appreciate I am very new to concrete5, but I was wondering what was the easiest way of aligning text neatly to the right of an image in a content block (and if that is the correct way of doing it)?
If you navigate tohttp://www.apmwoodflooring.co.uk and then click on "Solid wood" you'll see my attempt at aligning images and text which shows my current basic skills with concrete5 (coming from Word Press).
Do I need to create a 2x column layout with an image block in the left column and a content block in the right one, and then position the text t align with the top of the image?
Thanks in advance
Richard
Thank you for your reply.
Sorry for the newbie question, but which file to I need to modify?
Richard
On 22 September 2012 10:54, concrete5 Community <discussions@concretecms.com
> wrote:
Sorry for the newbie question, but which file to I need to modify?
Richard
On 22 September 2012 10:54, concrete5 Community <discussions@concretecms.com
> wrote:
Modify the 'main.css' file.
A quick dirty way to do it would be to add a 'content' block. Click add image and then add your text.
In your main.css add:
You don't always need to use 'block styles'.
See if it works for you.
A quick dirty way to do it would be to add a 'content' block. Click add image and then add your text.
In your main.css add:
.ccm-image-block{float:left;margin:10px}
You don't always need to use 'block styles'.
See if it works for you.
Hi,
Sorry, another really newbie question, what is the location for the
main.css file? There seems to be a number of different ones.
If I am modifying the default theme, which location would that be?
Many thanks for all of your help so far.
It's quite clear that the concrete5 community is second to none!
Richard
On 25 September 2012 23:14, concrete5 Community <discussions@concretecms.com
> wrote:
Sorry, another really newbie question, what is the location for the
main.css file? There seems to be a number of different ones.
If I am modifying the default theme, which location would that be?
Many thanks for all of your help so far.
It's quite clear that the concrete5 community is second to none!
Richard
On 25 September 2012 23:14, concrete5 Community <discussions@concretecms.com
> wrote:
You should find it in: yoursite/concrete/themes/greek_yogurt/main.css
OK, I have found it now.
Is there a way of adding it to the CSS tab, within the "Design" menu of the
block so that I don't have to adjust the main.css file?
Richard
*
Richard Mace*
On 26 September 2012 20:58, concrete5 Community <discussions@concretecms.com
> wrote:
Is there a way of adding it to the CSS tab, within the "Design" menu of the
block so that I don't have to adjust the main.css file?
Richard
*
Richard Mace*
On 26 September 2012 20:58, concrete5 Community <discussions@concretecms.com
> wrote:
It seems you can do it with the 'Layout tool'!
Never tried it before, but this is what I did:
Clicked to add to section, chose layout, then chose two columns and one row. Placed a picture in one and text in the other.
Try that
See attached
Never tried it before, but this is what I did:
Clicked to add to section, chose layout, then chose two columns and one row. Placed a picture in one and text in the other.
Try that
See attached
You can set any css in a block's design css tab, but it will only apply to that instance of a block. You can set the block design as a default, and it will apply by default to all instances of a block type. Or you can code a style tag into an html block (actually 'illegal' markup, but browsers seem to process it).
To plug one of my addons, Style Quickie provides a block containing a CSS and LESS development environment that can be added to a page to tweak a page's css, or to a global area to tweak an entire site's css. It puts the styles in the page header area so is valid markup.
http://www.concrete5.org/marketplace/addons/style-quickie/...
Its expensive if all you want to tweak is one block, but can be useful if you often find a need to play with styles without editing css files.
To plug one of my addons, Style Quickie provides a block containing a CSS and LESS development environment that can be added to a page to tweak a page's css, or to a global area to tweak an entire site's css. It puts the styles in the page header area so is valid markup.
http://www.concrete5.org/marketplace/addons/style-quickie/...
Its expensive if all you want to tweak is one block, but can be useful if you often find a need to play with styles without editing css files.
Hi JohntheFish,
Would you mind helping me with the CSS to out into a single block that
would effectively have an image on the left, and then the text wrapped to
the right?
Thanks
Richard
On 27 September 2012 08:48, concrete5 Community <discussions@concretecms.com
> wrote:
Would you mind helping me with the CSS to out into a single block that
would effectively have an image on the left, and then the text wrapped to
the right?
Thanks
Richard
On 27 September 2012 08:48, concrete5 Community <discussions@concretecms.com
> wrote:
In the content block editor:
- Place the cursor at the start of the text and click 'Add Image' in the light blue toolbar. Select and add the image.
- Back in the content editor, click the image to select it (will get a blue overlay), then click the little image icon 'Edit/Insert Image' on the main tinymce toolbar.
- Click the appearance tab.
- On the dropdown, select 'align left'.
- Add horizontal and vertical space (say, 10px)
- Save, Save.
And that should do it. This inserts the css @55 originally gave above directly into the image tab.
- Place the cursor at the start of the text and click 'Add Image' in the light blue toolbar. Select and add the image.
- Back in the content editor, click the image to select it (will get a blue overlay), then click the little image icon 'Edit/Insert Image' on the main tinymce toolbar.
- Click the appearance tab.
- On the dropdown, select 'align left'.
- Add horizontal and vertical space (say, 10px)
- Save, Save.
And that should do it. This inserts the css @55 originally gave above directly into the image tab.
See attached