[opencms-dev] New site

Fri Apr 4 20:35:47 CEST 2025

Thanks, Michael.
I'll try that.

El vie, 4 abr 2025 a la(s) 4:38 a.m., Michael Emmerich via opencms-dev (
opencms-dev at opencms.org) escribió:

> 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 visithttps://lists.opencms.org/mailman/listinfo/opencms-dev
>>
>>
>>  --
>> Michael Emmerich
>>
>>
>> Alkacon Software GmbH & Co. KG - The OpenCms Expertshttp://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 visithttps://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.comhttp://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
>
> _______________________________________________
> 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
>
>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.opencms.org/pipermail/opencms-dev/attachments/20250404/66cacb41/attachment.htm>