How can i make dual classes for my input and adjust for code

    • 68 posts
    September 24, 2018 5:17 AM EDT

    hey,

    can you please let me know that how can i found the CSS code that place in your script code, so i can make a custom css in theme.css and adjust this into code.

    for this input like

    .global_form input[type=text], .global_form input[type=email], .global_form input[type=password] { width: 150px; } and .global_form2 input[type=text], .global_form input[type=email], .global_form input[type=password] { width: 350px; }

    i want to create global_form2 with different width and how can i trace .global_form in your system or script which code is it.

     

    Regards

     

     

    • Moderator
    • 6923 posts
    September 24, 2018 6:20 AM EDT

    I'm not 100% sure what you are asking. You would use inspect element to find the code. https://support.socialengine.com/php/customer/portal/articles/1650794-customize-your-site-header-footer and this https://support.socialengine.com/php/customer/portal/articles/1638325-creating-your-own-theme might help. 

    • 68 posts
    September 24, 2018 6:46 AM EDT

    hey,

    maybe i am unable to explain well,

    i want to give different width of my TEXT INPUT in different section such as

    in Create Blog Section i want to give 500px for title of blog

    in Create Group Section i want to give 300px for title of Group

    in Create Event Section i want to give 300px for title of Group

    it means that the different input width in different page.

    *the above links i already see that but not for my usage.

    Regards

    • Moderator
    • 6923 posts
    September 24, 2018 7:52 AM EDT

    I had answered this same type of question in another thread a few days ago. To find the css or change the css for a specific page on your site, you would use inspect element on that page to find the code it is using. Then, in your theme.css you would put your changes for each page. So for blog, you would have blog.whatever in your code. An example in this forum is 

    body#global_page_forum_topic-view

     

    where it shows it is on the forum page. You can see it in inspect element when checking various items on the page. Blogs, groups, etc all have the same designations. This is how I style it on my own site too. 

    • 68 posts
    September 24, 2018 8:10 AM EDT

    well, this thing is i already know about it but the point is some of CSS code is same like

    .global_form input[type=text], .global_form input[type=email], .global_form input[type=password] { width: 150px; }

    when i change the width to 500px its change to all inputs but i want to change separably and i think its difficult for me.

    now help me, how can i give it separably like

    .global_form input[type=text], .global_form input[type=email], .global_form input[type=password] { width: 150px; } and .global_form2 input[type=text], .global_form2 input[type=email], .global_form input[type=password] { width: 550px; }

    now this .global_form2 where i need to place in system....

     

    • Moderator
    • 6923 posts
    September 24, 2018 9:47 AM EDT

    You do as I mentioned and make it for the specific page. As I said, this is how I style global elements on specific pages of the site so it doesn't impact other pages of the site. So you would go look at the group page and find the main area for that and use it in your code. Your code doesn't show anything designated for the blog page or group page.

     

    • 68 posts
    September 24, 2018 3:39 PM EDT

    yes,

    after a hard try now its working but i am work on it more.

    i display a code for other users;

    /* for blog create */ #global_page_blog-index-create .global_form input[type=text] { width: 550px; }

    Regards

    • Moderator
    • 6923 posts
    September 25, 2018 6:07 AM EDT

    Thanks for posting your example.