Html – CQ5 – footer with same parsys components for all pages withing a website

The parsys doesn't really inject the styles, but when you change the design parameters for the parsys component in they are stored the design page and when this is rendered as css by a Design class and the output is contains those updates.

How the design CSS is rendered

The design information is stored in the /etc/designs/my-design as you noticed. This component for this page supports a css rendition of the information contained.

You can track the source of the rendition using the CQ development tools included in the product...

If you take a look at your design page in crx/de or crx/explorer, you'll notice it has sling:resourceType of wcm/core/components/designer.

That will be rendered by the following java class /libs/wcm/core/components/designer/designer.css.java. You can take a look at this file in crx/de also. I'm not sure the license in that file would allow me to post a snippet here, but you should be able to find it easily yourself.

The class takes the page Resource and adapts the object to a com.day.cq.wcm.api.designer.Design instance.

Looking at the dependency finder in the web console, the Design class is provided by the cq-wcm-api bundle.

<dependency>
  <groupId>com.day.cq.wcm</groupId>
  <artifactId>cq-wcm-api</artifactId>
  <version>5.5.0</version>
  <scope>provided</scope>
</dependency>

This is provided by the jar: /libs/wcm/core/install/cq-wcm-api-5.5.0.jar, which is bundled with CQ.

Customising the design CSS

Looking at what you are trying to achieve... you are able to customise the content of the design page (this is normally by adding a design dialog to the component you are working with) adding any properties/css attributes associated with that component.

For an example of this take a look at logo component within the geometrixx design (/etc/designs/geometrixx/jcr:content/contentpage/logo). This already has a div img.margin property which translates to

.contentpage div.logo img {
  margin: 1px;
}

in the output css (/etc/designs/geometrixx.css?cacheKiller=xyz).

Adding a property named div img.border with a value of 5px solid red to this node will output css as:

.contentpage div.logo img {
  margin: 1px;
  border: 5px solid red;
}

Considering your example, your design content node at /etc/designs/my-design should look something like this:

+jcr:content
  + page_full
    + par
      + section
        - div .margin = 30px

Or in the repository XML format, like this:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Page">
    <jcr:content
        cq:lastModified="{Date}2013-01-13T17:22:51.339+01:00"
        cq:lastModifiedBy="admin"
        cq:template="/libs/wcm/core/templates/designpage"
        jcr:primaryType="cq:PageContent"
        jcr:title="design"
        sling:resourceType="wcm/core/components/designer">
        <page_full jcr:primaryType="nt:unstructured">
            <par jcr:primaryType="nt:unstructured">
                <section
                    jcr:primaryType="nt:unstructured"
                    div_x0020_.margin="30px"/>
            </par>
        </page_full>
    </jcr:content>
</jcr:root>

Design dialogs (which should be used to customise design content) are described to some extent on the Developing Components page. You can find the design dialog (for an example) of the logo component mentioned above at /libs/foundation/components/logo/design_dialog.html

You can do it by using name of the select

Your select must be inside the form

<form action="login" method="post">
<select name="jobCat">
        <option value="tech">Technology</option>
        <option value="admin">Administration</option>
        <option value="biology">Biology</option>
        <option value="science">Science</option>
     </select>

 UserId <input type="text/html" name="userId"/><br><br> Password <input type="password" name="password"/><br><br> <input type="submit"/> </form>

In your Login servlet, in your servlet post method just use the request.getparameter to get that value

eg



  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException {
        String selectedvalue  =  request.getparameter("jobCat");
         // you will get that value in the string selectedvalue
        }