[opencms-dev] New site

Thu Apr 10 04:53:28 CEST 2025

Hello Michael, could you help me with the change of language of a site?
specifically of the search, there in an example in the demo, of English and
German, but I can not change the language of that page to Spanish for
example, the function is always in English.

El vie, 4 abr 2025 a la(s) 3:35 p.m., Juan Garrido (topoxd29 at gmail.com)
escribió:

> 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/20250409/4442f99a/attachment.htm>