[opencms-dev] New site
Michael Emmerich
m.emmerich at alkacon.com
Fri Apr 4 09:38:32 CEST 2025
Hello Juan,
good to hear that the instruction worked :)
Basically, there are two ways how you can modify the css for the Template.
1) You can build a complete new theme for the Mercury template.
To do so, you have to check out the Mercury template from git under
https://github.com/alkacon/mercury-template and follow the instructions
there to build a new template css. It can take a bit to set up your
environment that you can create a new theme.
Once you have created your own theme, upload the .css and .map file into
your OpenCms. If you only want to make changes to colors, the easiest
would be to upload them to "/system/modules/alkacon.mercury.theme/css/"
as ll other files like fonts, icons etc are identical.
You then need to set the property "mercury.theme" to your CSS file, e.g.
"/system/modules/alkacon.mercury.theme/css/theme-mytheme.min.css". This
property should be set to your site folder, e.g. /"stes/mysite/". The
Mercury template will then use the modified theme.
2) Another option would be to add a new, additional CSS that overrides
certain styles from the original Mercury css. If you only want to make
small changes, this might be a faster solution, but here you need to
inspect the current CSS and HTML to see what must be overwritten.
To do so, make the following:
- Go to the module management app in OpenCms and create a new modules,
e.g. "mymodule.com". Make sure that you have checked the "Create module
folder" and "Create resources subfolder" checkboxes
- Upload the css to "/system/modules/mymodule.com/resources", the name
of the css MUST be "custom.css".
- Switch the site selector to your site and edit the sitemap
configuration "/content/.config/".
- Go to the "Attributes" tab and add a new attribute: with the key
"template.allow.mods" and the value "true"
- Switch the site selector to the root site "/" and set a property to
your site folder, e.g. /sites/mysite/". You must set the property
"mercury.extra.css" to the folder where you have stored your custom css
file.
So in this example it would be "/system/modules/mymodule.com/resources/"
-> Your custom css will then loaded after the original Mercury css and
you can overwrite some styles.
So building a new theme is the "bigger" option which give you more
options, but you need to know how to work with SCSS files and it might
be more complicated to set up. For smaller changes, the custom.css might
be enough to do.
Kind regards,
Michael
The Alkacon Support Team
Am 03.04.25 um 20:15 schrieb Juan Garrido via opencms-dev:
> Thanks, Michael.
> I did everything you told me without any problems. My question now is
> how to change the background color of the header and footer. I want to
> use hex colors if possible. For example, I want the header to have a
> black background, and I want different, more personalized colors for
> the footer.
>
> El jue, 3 abr 2025 a la(s) 5:11 a.m., Michael Emmerich via opencms-dev
> (opencms-dev at opencms.org) escribió:
>
> Hello Juan,
>
> ok, here is a "short" introduction how to set up a new site in
> OpenCms using the Mercury template. The tricky thing is not
> setting up the site itself, but to configure the Mercury for its
> first use.
>
>
> What you need is a running OpenCms installation with the Mercury
> template installed. Some basic knowledge how to drag & drop
> content elements into a page in OpenCms is useful.
>
> *
> *
>
> *1) Create a New Website*
>
> - Go to the launchpad and select the Websites app
>
> - Click on the "New" icon in the toolbar
>
> - Enter the website name (Title), e.g. "MyWebsite" and the Server URL
>
> - Make sure that the "Template" field has
> "/system/modules/alkacon.mercury.template/templates/mercury.jsp" in it
>
> - Click on "Ok" and OpenCms creates the website and the required
> files.
>
>
> *2) Configure the Website for the use of the Mercury Template*
>
> - Switch to the Explorer view
>
> - Select your newly created website ("MyWebsite") in the site selector
>
> - Edit the file "/.content/.config"
>
> - Chosse
> "/system/modules/alkacon.mercury.template/configuration/mercury.master.xml"
> as the Master Configuration
>
>
> *3) Set up a Mercury Template model*
>
> - Switch to the Sitemap Editor
>
> -Select "Templates" from the sitemap mode selector in the toolbar
>
> -> You now see a "Default Model for site "MySite" under Templates
> and no entry at the Model groups
>
> - Create two model groups by pressing the "plus button":
>
> -Header: Title and Description set to "Header"
>
> -Footer: Title and Description set to "Footer"
>
> *
> *
>
> *4) Configure the Header:*
>
> - Click on the "Header" model group
>
> -> You now see an empty page with a read container in it
>
> - Click on "New" in the toolbar then choose "Template elements"
> under "Types"
>
> - Click on "Layout group" and drag & drop "Mercury header with
> flexible layout option" into the red container
>
> -> You now see a green, empty container and an orange message box
>
> - Click on "New" in the toolbar again and chose "Advanced
> elements" under "Types"
>
> - Click on "Dynamic function" and drag & drop "Header
> configuration" into the green container
>
> -> The page will automatically reload and then show up four new
> containers that we will later use to put content elements in our
> header
>
> - Press "CTRL-E" until you see the message "Switched view:
> Template elements"
>
> - Go to the edit point in the upper right, select settings and
> choose "Reuse elements" for the group type
>
> -> The box on top of the page now says "Reuse Group"
>
>
> *5) Add content elements to the Header*
>
> - Click on "New" and choose "Content elements" under "Types"
>
> - Drag and Drop a new "Link Sequence" in the top right container,
> this is the only place where you can put it
>
> -> This will be the top header links, so you now should simply add
> some Dummy values in there. You can later change them to the real
> links
>
> - Click on "New" and choose "Content elements" under "Types"
>
> - Drag and Drop a new "Content Section" in the top left container,
> this is the only place where you can put it
>
> -> This will be the Header image and website title, so enter a
> title and an image in this content.
>
> - Click on "New" and choose "Advanced elements" under "Types"
>
> - Drag and Drop a new "Navigation"in one of the other containers.
>
> -> This will add the navigation or the breadcrumb (depending in
> which of the containers you dropped it). Edit the content and give
> it a title
>
> - Click on "New" and choose "Advanced elements" under "Types"
>
> - Drag and Drop a new "Navigation"in the last remaining containers.
>
> -> This will add the navigation or the breadcrumb (depending in
> which of the containers you dropped it). Edit the content and give
> it a title
>
> -> We are now done with configuring the header and can return to
> the sitemap
>
>
> *6) Configure the footer*
>
> - In the Sitemap editor, click on "Footer"
>
> -> You now see an empty page with a read container in it
>
> - Click on "New" and select "Template elements"
>
> - Click on "Layout group" and drag & drop the "Mercury footer full"
>
> -> This will now show so two orange containers which we will later
> use to put content elements in our footer
>
> - Press "CTRL-E" until you see the message "Switched view:
> Template elements"
>
> - Go to the edit point in the upper right, select settings and
> choose "Reuse elements" for the group type
>
> -> The box on top of the page now says "Reuse Group"
>
>
> *7) Add content elements to the Footer*
>
> - As the footer is more flexible what ot put in there, we need to
> add some rows first
>
> - Click on "New" and select "Template elements"
>
> - Click on "Layout row" and drag & drop the "Row 1 column (12
> -full) into the lower container
>
> - Click on "New" and select "Template elements"
>
> - Click on "Layout row" and drag & drop the "Row 3 columns (4-4-4)
> into the upper container
>
> -> You now created the containers for the footer. Usually the
> three upper ones can be used for content sections or link
> sequences (showing links below each other), the lower one is used
> for some footer links in a link section besides each other. For
> example, you could fill it like this:
>
> - Click on "New" and choose "Content elements" under "Types"
>
> - Drag and Drop a new "Content Section" in the top left container
>
> - Add some text and headline there
>
> Click on "New" and choose "Content elements" under "Types"
>
> - Drag and Drop a new "Content Section" in the top right container
>
> - Add some text and headline there
>
> - Click on "New" and choose "Content elements" under "Types"
>
> - Drag and Drop a new "Link Sequence" in the top middle container,
>
> - Add some dummy links in there
>
> - Click on "New" and choose "Content elements" under "Types"
>
> - Drag and Drop a new "Link Sequence" in the top lower container,
>
> -> This will be the footer links, so you now should simply add
> some Dummy values in there. You can later change them to the real
> links
>
> - Go to the edit point, select settings and choose "Link sequence
> page element" as the formatter, "in a row" for "Display"
>
> -> We are now done with configuring the footer and can return to
> the sitemap
>
>
> *8) Configure the template model*
>
> - In the Sitemap editor, click on "Default Model for site "My Website"
>
> -> You now see an empty page with a read container in it
>
> - Click on "New" and select "Template elements"
>
> - Click on "Layout area" and drag & drop the "Area - One row" into
> the page
>
> -> You will now get one new container, this is where you later
> place your rows
>
> - Click on "New" and select "Advanced elements"
>
> - Choose "Model group" and drag & drop the "Header" model group
> above the Layout are from the step before
>
> - Click on "New" and select "Advanced elements"
>
> - Choose "Model group" and drag & drop the "Footer" model group
> below the Layout are from two steps before
>
> -> You now created you Template model which will be used when
> creating new pages
>
>
> *9) Creating new pages:*
>
> -Select "Sitemap" from the sitemap mode selector in the toolbar
>
> - Click on "New" in the toolbar then crag & drop a "Default Model
> for site "MySite" into the sitemap
>
> -> The new page is now called "page", you can rename it by
> clicking on the name.
>
> - Click on the newly created page, it then opens in the page
> editor, including the header and footer you have created.
>
> - Click on "New" and select "Template elements"
>
> - Click on "Layout row" and drag & drop any of the layout rows
> into the orange container. You can add multiple layout rows to
> build the structure of the page you want
>
> HINT: If you always want to use the same row structure, you could
> also add the rows to your Template Model. All pages created with
> this model will have the same row structure, but you still are
> able to modify it after creating a new page
>
> - Click on "New" and select "Content Elements. Select the type of
> content you want to have and drag& drop it in any of the
> containers in your rows.
>
>
> Please refer to https://mercury-template.opencms.org/ for all the
> content types and how to use or configure them. Please note: The
> Mercury documentation is only available in German, so you need to
> use the translate functions of your browser to get it in English.
>
>
> I hope that I mixed nothing up here, but it should work this way.
>
>
> Kind regards,
>
> Michael
>
>
> Am 02.04.25 um 14:09 schrieb Juan Garrido via opencms-dev:
>> Hi Miguel
>> Thanks for your reply. I want to create a website using the
>> Mercury template.
>>
>> El mié, 2 abr 2025 a la(s) 7:52 a.m., Michael Emmerich via
>> opencms-dev (opencms-dev at opencms.org) escribió:
>>
>> Hello Diego,
>>
>> > Hi, I'm new to OpenCMS and I'd like to know if you have a
>> guide on how
>> > to create a new site. I've read the documentation and I
>> don't fully
>> > understand it. Is there a step-by-step guide?
>> > Thanks
>>
>> Do you want to create a new site using the Mercury template,
>> or do you
>> want to create a new site that uses a new, custom build template?
>>
>> If you want to use the Mercury template for your site, the
>> "challenge"
>> is to configure it correctly for your use. if you want to use
>> your own
>> one, the thing is to make your template first.
>>
>> If you can say which way you want to do, I could give some
>> advice.
>>
>>
>> Kind regards,
>>
>> Michael
>>
>> --
>> Michael Emmerich
>>
>> Alkacon Software GmbH & Co. KG - The OpenCms Experts
>> http://www.alkacon.com - http://www.opencms.org
>>
>> _______________________________________________
>> This mail is sent to you from the opencms-dev mailing list
>> To change your list options, or to unsubscribe from the list,
>> please visit
>> https://lists.opencms.org/mailman/listinfo/opencms-dev
>>
>>
>>
>>
>> _______________________________________________
>> This mail is sent to you from the opencms-dev mailing list
>> To change your list options, or to unsubscribe from the list, please visit
>> https://lists.opencms.org/mailman/listinfo/opencms-dev
>>
>>
>>
> --
> Michael Emmerich
>
>
> Alkacon Software GmbH & Co. KG - The OpenCms Experts
> http://www.alkacon.com -http://www.opencms.org
>
> _______________________________________________
> This mail is sent to you from the opencms-dev mailing list
> To change your list options, or to unsubscribe from the list,
> please visit
> https://lists.opencms.org/mailman/listinfo/opencms-dev
>
>
>
>
> _______________________________________________
> This mail is sent to you from the opencms-dev mailing list
> To change your list options, or to unsubscribe from the list, please visit
> https://lists.opencms.org/mailman/listinfo/opencms-dev
>
>
>
--
Michael Emmerich
-------------------
Alkacon Software GmbH & Co. KG - The OpenCms Experts
Michael Emmerich
An der Wachsfabrik 13
50996 Koeln, DE
Tel: +49 (0)2236 3826-14
Fax: +49 (0)2236 3826-20
Email:m.emmerich at alkacon.com
http://www.alkacon.com
http://www.opencms.org
Amtsgericht Köln, HRA 32185, USt-IdNr.: DE259882372
Vertreten durch: Alkacon Verwaltungs GmbH
Geschäftsführer: Alexander Kandzior, Amtsgericht Köln, HRB 88218
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.opencms.org/pipermail/opencms-dev/attachments/20250404/6839ff0d/attachment.htm>
More information about the opencms-dev
mailing list