how to set multiple css for 2 different pages /controls in one website

jim lobo asked on August 27, 2014 14:05

how to set multiple css for 2 different pages /controls in one website example: I have 2 pages website/page1.aspx website/page2.aspx website/css/css1 website/css/css2 In Page1.aspx i want to use .btn { background-color:red ;color:white;} for button from css1.css file
In Page2.aspx i want to use .btn1 { background-color:green ;color:white;} for button from css2.css file How to accomplish this and if i want to change the class name of control : class="filterButton btn btn-default" example: <input name="p$lt$ctl06$wP$p$lt$ctl00$wNF$filterDocuments$btnSelect" class="filterButton btn btn-default" id="p_lt_ctl06_wP_p_lt_ctl00_wNF_filterDocuments_btnSelect" onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("p$lt$ctl06$wP$p$lt$ctl00$wNF$filterDocuments$btnSelect", "", true, "", "", false, false))' type="submit" value="Search">

how to change and where to change ?

Recent Answers


Brenden Kehren answered on August 27, 2014 14:36

First question is why different stylesheets for different pages? Should be no reason you can't have that all in one stylesheet and simply reference the class you want in your control.

If your class is "btn1" and the class assigned to the control (that you may or may not have access to) is "filterButton btn btn-default", you'd have to modify your stylesheet to be something like this:

.btn1, .filterButton .btn .btn-default { background-color:red; color: white; }
0 votesVote for this answer Mark as a Correct answer

jim lobo answered on August 27, 2014 15:02

Hi Brendan. Thanks for your help. just i am confused here.
example: website/page1.aspx if i want to change the button color of page1.aspx to blue (as it is ) code is :

.sendToFriendPanel input[type=submit], .LogonDialog input[type=submit], .LoginPanelPasswordRetrieval input[type=submit], .LongButton, .EventManagerRegistration .EventManagerRegButton, .filterButton, .WishlistTable .btnContinue input, .CartTable input[type=submit], .CntRatingSubmitBtn, .commentView .btn-primary, .SubscriptionButton, .ProductFilter .btn, .FormButton, .examplesToLeft input[type=submit], .CMSSearchDialogSearchButton, .ChangePasswordTable input[type=submit], .RegisterButton, .my-profile-panel .btn, .Account .btn, .myAccount .btn, .datetime-ui-datepicker .btn, .ContentButton, .CartStepBody .btn, .CartStepFooter input, .FilterSearch .btn, .DonateWebPart .btn, .ExamplesContent .form-minilogon .btn, .MyMessages .btn, .ContributionsEdit .btn, .registration-form .btn, .SearchDialog .btn, .abuse-report .btn, .PollVoteButton, .membership-req-data .btn, .CntRatingContent .btn, .unsubcription-request .btn, .Search .btn, .new-blog .btn, .ForumExtendedSearch .btn, .message-edit .btn, .new-subscription-form .btn, .send-message .btn, .forum-search .btn, .search-dialog .btn, .change-password .btn, .WizardButton, .PageContent .btn-actions .btn, .header-panel .btn, .MassAction .btn, .Forum .btn, .UniSelector .btn, .EventManagerRegistration .btn, .WizardButtons .btn, .NotificationSubscriptionButton .btn, .message-view .btn, .ExamplesContent .form-filter .btn {background-color: blue;}

website/page2

i want to change the button color to green :

.sendToFriendPanel input[type=submit], .LogonDialog input[type=submit], .LoginPanelPasswordRetrieval input[type=submit], .LongButton, .EventManagerRegistration .EventManagerRegButton, .filterButton, .WishlistTable .btnContinue input, .CartTable input[type=submit], .CntRatingSubmitBtn, .commentView .btn-primary, .SubscriptionButton, .ProductFilter .btn, .FormButton, .examplesToLeft input[type=submit], .CMSSearchDialogSearchButton, .ChangePasswordTable input[type=submit], .RegisterButton, .my-profile-panel .btn, .Account .btn, .myAccount .btn, .datetime-ui-datepicker .btn, .ContentButton, .CartStepBody .btn, .CartStepFooter input, .FilterSearch .btn, .DonateWebPart .btn, .ExamplesContent .form-minilogon .btn, .MyMessages .btn, .ContributionsEdit .btn, .registration-form .btn, .SearchDialog .btn, .abuse-report .btn, .PollVoteButton, .membership-req-data .btn, .CntRatingContent .btn, .unsubcription-request .btn, .Search .btn, .new-blog .btn, .ForumExtendedSearch .btn, .message-edit .btn, .new-subscription-form .btn, .send-message .btn, .forum-search .btn, .search-dialog .btn, .change-password .btn, .WizardButton, .PageContent .btn-actions .btn, .header-panel .btn, .MassAction .btn, .Forum .btn, .UniSelector .btn, .EventManagerRegistration .btn, .WizardButtons .btn, .NotificationSubscriptionButton .btn, .message-view .btn, .ExamplesContent .form-filter .btn { background-color: green }

how to accomplish this with 1 CSS file ?

0 votesVote for this answer Mark as a Correct answer

jim lobo answered on August 27, 2014 15:05

classname for both button uses: class=" FormButton btn btn-primary "

0 votesVote for this answer Mark as a Correct answer

Joshua Adams answered on August 27, 2014 15:07

You need to distinguish these items by creating a css class for blue and one for green. Then go to your elements and add the class directly to the items. Set the CssClass property to "mypropGreen" or "mypropBlue". This will allow for the same elements to carry different styles, otherwise, if you are using the classes above, that are the same, you won't be able to control both, one will just override the other. You can keep them all in one file if you create new css classes and then attach them.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.