[Template] ترقيم صفحات المنتديات و المواضيع لـ منتديات احلى منتدي احترافي
[Template-Js-Css] كود ارقام صفحات المنتديات و المواضيع لـ منتديات احلى منتدي احترافي
السلام عليكم و رحمة الله و بركاته
متابعي و زوار شبكة احلى حكاية
كما وعدتكم دائما ان اقدم لكم كل ما هو جديد و مفيد لكم و لمنتدياتكم
لكن اليوم ما اقدمه ليكم ليست بـ جديد فقد برمجته له مسبقاً العديد من الاشكال و الاكواد
قد تجدها فى اى تصميم قومت بتحميله من خلالنا او من برمجتنا و هو كود تعدد صفحات المواضيع و المنتديات
الكود و هو باختصار تحسين لارقام صفحات الموضوع و صفحات المنتديات
كود يعمل على تصميم فقط بتعديلات بسيطه ليست صعبه
و ليكم صورة كود صفحات المنتدي على التصميم الاساسي لمنتديات احلى منتدي
رجاء ترك تعليق مناسب يشجعنا على تقديم المزيد من الاكواد و البرمجيات و الافكار التى ترغبوا بها كم
طريقة التعديل و التركيب على المنتديات
الذهب الى
لوحة الادارة / مظهر المنتدي / التومبلايتات و القوالب / إدارة عامة
اضغط تعديل على قالب topics_list_box
او قالب topics_blog_box
اذا كنت تقوم بتفعيل المدونات على المنتدي
ثم ابحث عن هذا الكود
<td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
و استبدله بهذا الكود
<td class="row1 alt1" colspan="7" align="right" id="a7la-PAGINATION"><span class="gensmal2">{PAGINATION}</span></td>
و ابحث عن هذا الكود
<!-- BEGIN bottom -->
<tr>
<td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <span class="gensmall">{PAGINATION}</span></td>
<td align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
<!-- END bottom -->
و استبدله بهذا
<!-- BEGIN bottom -->
<tr>
<td class="row1" colspan="7" align="right" id="a7la7ekaya-PAGINATION"><span class="gensmall">{PAGINATION}</span></td>
</tr>
<!-- END bottom -->
ثم اضغط حفظ / ثم انشر التعديل
و الان كود ارقام صفحات الموضوع
الصوره
اضغط تعديل على قالب viewtopic_body
و قالب viewcomments_body للمدونات
و ابحث عن هذا الكود
<!-- BEGIN topicpagination -->
<tr>
<td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
</tr>
<!-- END topicpagination -->
و استبدلها بهذا
<!-- BEGIN topicpagination -->
<tr>
<td class="row1" colspan="2" align="right" id="a7la-PAGINATION"><span class="gensmal2">{PAGINATION}</span></td>
</tr>
<!-- END topicpagination -->
و ابحث عن هذا الكود
<td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
و استبدله بهذا
<td class="row1" align="right" valign="top" id="a7la7ekaya-PAGINATION"><span class="gensmall">{PAGINATION}</span></td>
ثم اضغط حفظ / ثم انشر التعديل
ثم اذهب الى
الوان & ورقة ال CSS / ورقم تصميم css
و ضع هذا الكود و اضغط حفظ
/* ========================================= */
/* ==== A7la7ekaya Pagination - Style الطائر الحر ==== */
/* ========================================= */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
/* ----- 1. Container Styling ----- */
td#a7la-PAGINATION span, td#a7la7ekaya-PAGINATION span {
flex-wrap: wrap;
gap: 2px; /* Adjust gap slightly if needed */
padding: 3px 3px;
font-size: 0;
}
/* ----- 2. Common Styles for All Items ----- */
td#a7la-PAGINATION span > a,
td#a7la-PAGINATION span > b, td#a7la7ekaya-PAGINATION span > a,
td#a7la7ekaya-PAGINATION span > b {
display: inline-flex;
justify-content: center;
align-items: center;
height: 25px; /* Consistent height */
min-width: 25px; /* Minimum width ensures circles aren't too small */
padding: 0 10px; /* Horizontal padding for numbers */
font-size: 12px;
font-weight: 500; /* Use 600 or 700 for bolder numbers */
color: #ffffff; /* White text/icons */
background-color: #2d3748; /* Dark background (adjust hex as needed) */
border: none; /* No borders */
border-radius: 6px; /* Default rounded corners for numbers */
box-sizing: border-box;
text-decoration: none;
transition: background-color 0.2s ease-in-out;
position: relative; /* Needed for ::before */
margin-left: 2px;
}
/* ----- 3. Link Styles ----- */
td#a7la-PAGINATION span > a, td#a7la7ekaya-PAGINATION span > a {
cursor: pointer;
}
td#a7la-PAGINATION span > a:hover, td#a7la7ekaya-PAGINATION span > a:hover {
background-color: #4a5568; /* Slightly lighter background on hover */
}
/* ----- 4. Current Page Style ----- */
td#a7la-PAGINATION span > b, td#a7la7ekaya-PAGINATION span > b {
background-color: #718096; /* Lighter grey for current page (adjust hex as needed) */
color: #ffffff; /* Ensure text stays white */
font-weight: 700; /* Bolder font for current page */
cursor: default;
border-radius: 6px; /* Keep the number shape */
}
/* ----- 5. Arrow Button Specific Styles using :has() ----- */
/* Hide the original images */
td#a7la-PAGINATION span > a img, td#a7la7ekaya-PAGINATION span > a img {
display: none;
}
/* Target ONLY the links that directly contain an img> (Arrow Buttons) */
td#a7la-PAGINATION span > a:has(> img), td#a7la7ekaya-PAGINATION span > a:has(> img) {
padding: 0; /* Remove horizontal padding */
width: 25px; /* Force width equal to height for circle */
border-radius: 50%; /* Make it circular */
}
/* Add the ::before pseudo-element for the icon ONLY to links containing an image */
td#a7la-PAGINATION span > a:has(> img)::before, td#a7la7ekaya-PAGINATION span > a:has(> img)::before {
content: "\f054"; /* Default empty content */
font-family: 'Font Awesome 5 Free';
font-weight: 900; /* Use solid icons */
font-size: 12px; /* Icon size */
color: inherit; /* Inherit color (white) */
}
/* Define the specific icon for Previous/Next based on position */
/* Previous Icon: Target the FIRST direct child 'a' element that contains an image */
td#a7la-PAGINATION span > a:has(> img):first-of-type::before, td#a7la7ekaya-PAGINATION span > a:has(> img):first-of-type::before {
content: "\f054"; /* angle-left */
}
/* Next Icon: Target the LAST direct child 'a' element that contains an image */
td#a7la-PAGINATION span > a:has(> img):last-of-type::before, td#a7la7ekaya-PAGINATION span > a:has(> img):last-of-type::before {
content: "\f053"; /* angle-right */
}
/* ----- 6. Optional: Style for "Go to page" link ----- */
/* Target by href attribute, this doesn't contain an img, so it keeps default style or override */
td#a7la-PAGINATION span > a:first-of-type[href*="javascript:Pagination"], td#a7la7ekaya-PAGINATION span > a:first-of-type[href*="javascript:Pagination"] {
/* Keep it styled like a number button or hide it */
/* Example: Keep it like a number */
padding: 0 10px; /* Ensure it has padding */
min-width: 25px; /* Ensure min-width */
width: auto; /* Allow width to adjust to text */
border-radius: 6px; /* Ensure it's a rounded rectangle */
/* Or hide it if you don't want it: */
/* display: none; */
}
/* --- تصحيح حجم خط عنصر الاختبار --- */
td#a7la-PAGINATION span#pagination-info-box, td#a7la7ekaya-PAGINATION span#pagination-info-box {
font-size: 14px;
font-weight: 700;
}
/* --- تنسيق لوحة معلومات الترقيم (مع تصحيح حجم الخط) --- */
#pagination-info-box { /* استخدام ID للتحديد */
display: inline-flex;
align-items: center;
height: 27px;
padding: 0 15px;
margin-left: 10px;
background-color: #86c086;
color: #ffffff;
font-size: 13px; /* تأكد من وجود حجم خط هنا لتجاوز القاعدة العامة */
font-weight: 700;
border-radius: 6px;
white-space: nowrap;
box-sizing: border-box;
vertical-align: middle;
width: 150px;
}
/* القاعدة الأصلية التي لا يجب تعديلها */
td#a7la-PAGINATION span, td#a7la7ekaya-PAGINATION span {
flex-wrap: wrap;
gap: 2px;
padding: 3px 3px;
font-size: 0; /* تبقى هذه القاعدة كما هي لتأثيرها على span.gensmall */
}
ثم اذهب الى
العناصر الاضافية / HTML و JAVASCRIPT / إدارة أكواد Javascript
انشاء كود جديد
ضع الكود التالى على جميع الصفحات و اضغط حفظ
// Function to run the pagination info logic
function setupPaginationInfo() {
console.log('Pagination Info Script: Running setupPaginationInfo function...'); // DEBUG
// --- Configuration ---
const pageInfoId = 'pagination-info-box'; // ID for the new info box
const textFormat = 'صفحة | {current} من أصل | {total}'; // Text format
// --- Find Containers ---
const outerContainer = document.getElementById('a7la-PAGINATION'); // Use TD
if (!outerContainer) {
console.log('Pagination Info Script: ERROR - TD container #a7la-PAGINATION not found.');
return; // Stop if TD not found
}
console.log('Pagination Info Script: Found TD container.'); // DEBUG
const paginationControlsContainer = outerContainer.querySelector('span.gensmal2');
if (!paginationControlsContainer) {
console.log('Pagination Info Script: ERROR - Inner span.gensmal2 not found inside TD.');
return; // Stop if span.gensmal2 not found
}
console.log('Pagination Info Script: Found inner span.gensmal2.'); // DEBUG
// --- Prevent Duplicate Creation ---
// Check if info box *already exists* as a child of the TD
if (outerContainer.querySelector('#' + pageInfoId)) {
console.log('Pagination Info Script: INFO - Info box #' + pageInfoId + ' already exists.');
// Optionally update it here if needed, or just return
return;
}
// --- Get Current Page ---
const currentElement = paginationControlsContainer.querySelector('b');
if (!currentElement) {
console.log('Pagination Info Script: INFO - Current page element (b) not found.');
// If no 'b', maybe there's only one page total? Check links.
const pageLinks = paginationControlsContainer.querySelectorAll('a');
if (pageLinks.length === 0 || (pageLinks.length === 1 && pageLinks[0].textContent.trim() === '1')) {
console.log('Pagination Info Script: Assuming 1 page total based on links.');
// Optionally still add "Page 1 of 1" box here if desired
}
return; // Stop if no current page indicator (and not definitively page 1 of 1)
}
const currentPage = parseInt(currentElement.textContent.trim(), 10);
if (isNaN(currentPage)) {
console.log('Pagination Info Script: ERROR - Cannot parse current page number from <b>.');
return;
}
console.log('Pagination Info Script: Current page =', currentPage); // DEBUG
// --- Determine Total Pages ---
let totalPages = 0;
const numericItems = Array.from(paginationControlsContainer.children)
.filter(el => (el.tagName === 'A' || el.tagName === 'B') && /^\d+$/.test(el.textContent.trim()));
if (numericItems.length > 0) {
const pageNumbers = numericItems.map(el => parseInt(el.textContent.trim(), 10)).filter(num => !isNaN(num));
if (pageNumbers.length > 0) {
totalPages = Math.max(...pageNumbers);
}
}
// If totalPages is still 0, try looking for "GoTo" link text if present (less reliable)
if (totalPages === 0) {
// Heuristic: If we only have current page '1', assume total is 1.
if (currentPage === 1 && pageNumbers.length === 1 && pageNumbers[0] === 1) {
totalPages = 1;
console.log('Pagination Info Script: Setting total pages to 1 based on current page being 1 and no other numbers.');
} else {
console.log('Pagination Info Script: ERROR - Could not determine total pages reliably.');
return; // Stop if total pages are unknown
}
}
console.log('Pagination Info Script: Total pages (estimated) =', totalPages); // DEBUG
// --- Create and Insert the Info Box ---
const infoBox = document.createElement('span');
infoBox.id = pageInfoId;
infoBox.className = 'pagination-info';
const infoText = textFormat.replace('{current}', currentPage).replace('{total}', totalPages);
infoBox.textContent = infoText;
// Append the info box AFTER the span.gensmal2, making it the last child of the TD
outerContainer.appendChild(infoBox);
console.log('Pagination Info Script: Info box #' + pageInfoId + ' added successfully to TD.'); // DEBUG
}
// --- Run the setup function ---
// Attempt 1: Run on DOMContentLoaded
document.addEventListener('DOMContentLoaded', setupPaginationInfo);
// Attempt 2: Add a small delay after DOMContentLoaded, just in case
// Ahlamontada scripts render pagination slightly later.
// Adjust delay (e.g., 200ms, 500ms) if needed, but keep it short.
document.addEventListener('DOMContentLoaded', function() {
setTimeout(setupPaginationInfo, 150); // Delay of 150 milliseconds
});
// Attempt 3: If using jQuery (often included in Ahlamontada), this is more robust
// if (typeof $ !== 'undefined') {
// $(document).ready(setupPaginationInfo);
// $(document).ready(function() { setTimeout(setupPaginationInfo, 150); });
// }
// Function to run the pagination info logic
function setupPaginationInfo() {
console.log('Pagination Info Script: Running setupPaginationInfo function...'); // DEBUG
// --- Configuration ---
const pageInfoId = 'pagination-info-box'; // ID for the new info box
const textFormat = 'صفحة | {current} من أصل | {total}'; // Text format
// --- Find Containers ---
const outerContainer = document.getElementById('a7la7ekaya-PAGINATION'); // Use TD
if (!outerContainer) {
console.log('Pagination Info Script: ERROR - TD container #a7la7ekaya-PAGINATION not found.');
return; // Stop if TD not found
}
console.log('Pagination Info Script: Found TD container.'); // DEBUG
const paginationControlsContainer = outerContainer.querySelector('span.gensmall');
if (!paginationControlsContainer) {
console.log('Pagination Info Script: ERROR - Inner span.gensmall not found inside TD.');
return; // Stop if span.gensmall not found
}
console.log('Pagination Info Script: Found inner span.gensmall.'); // DEBUG
// --- Prevent Duplicate Creation ---
// Check if info box *already exists* as a child of the TD
if (outerContainer.querySelector('#' + pageInfoId)) {
console.log('Pagination Info Script: INFO - Info box #' + pageInfoId + ' already exists.');
// Optionally update it here if needed, or just return
return;
}
// --- Get Current Page ---
const currentElement = paginationControlsContainer.querySelector('b');
if (!currentElement) {
console.log('Pagination Info Script: INFO - Current page element (b) not found.');
// If no 'b', maybe there's only one page total? Check links.
const pageLinks = paginationControlsContainer.querySelectorAll('a');
if (pageLinks.length === 0 || (pageLinks.length === 1 && pageLinks[0].textContent.trim() === '1')) {
console.log('Pagination Info Script: Assuming 1 page total based on links.');
// Optionally still add "Page 1 of 1" box here if desired
}
return; // Stop if no current page indicator (and not definitively page 1 of 1)
}
const currentPage = parseInt(currentElement.textContent.trim(), 10);
if (isNaN(currentPage)) {
console.log('Pagination Info Script: ERROR - Cannot parse current page number from <b>.');
return;
}
console.log('Pagination Info Script: Current page =', currentPage); // DEBUG
// --- Determine Total Pages ---
let totalPages = 0;
const numericItems = Array.from(paginationControlsContainer.children)
.filter(el => (el.tagName === 'A' || el.tagName === 'B') && /^\d+$/.test(el.textContent.trim()));
if (numericItems.length > 0) {
const pageNumbers = numericItems.map(el => parseInt(el.textContent.trim(), 10)).filter(num => !isNaN(num));
if (pageNumbers.length > 0) {
totalPages = Math.max(...pageNumbers);
}
}
// If totalPages is still 0, try looking for "GoTo" link text if present (less reliable)
if (totalPages === 0) {
// Heuristic: If we only have current page '1', assume total is 1.
if (currentPage === 1 && pageNumbers.length === 1 && pageNumbers[0] === 1) {
totalPages = 1;
console.log('Pagination Info Script: Setting total pages to 1 based on current page being 1 and no other numbers.');
} else {
console.log('Pagination Info Script: ERROR - Could not determine total pages reliably.');
return; // Stop if total pages are unknown
}
}
console.log('Pagination Info Script: Total pages (estimated) =', totalPages); // DEBUG
// --- Create and Insert the Info Box ---
const infoBox = document.createElement('span');
infoBox.id = pageInfoId;
infoBox.className = 'pagination-info';
const infoText = textFormat.replace('{current}', currentPage).replace('{total}', totalPages);
infoBox.textContent = infoText;
// Append the info box AFTER the span.gensmall, making it the last child of the TD
outerContainer.appendChild(infoBox);
console.log('Pagination Info Script: Info box #' + pageInfoId + ' added successfully to TD.'); // DEBUG
}
// --- Run the setup function ---
// Attempt 1: Run on DOMContentLoaded
document.addEventListener('DOMContentLoaded', setupPaginationInfo);
// Attempt 2: Add a small delay after DOMContentLoaded, just in case
// Ahlamontada scripts render pagination slightly later.
// Adjust delay (e.g., 200ms, 500ms) if needed, but keep it short.
document.addEventListener('DOMContentLoaded', function() {
setTimeout(setupPaginationInfo, 150); // Delay of 150 milliseconds
});
// Attempt 3: If using jQuery (often included in Ahlamontada), this is more robust
// if (typeof $ !== 'undefined') {
// $(document).ready(setupPaginationInfo);
// $(document).ready(function() { setTimeout(setupPaginationInfo, 150); });
// }
وبكدا يكون انتهاء شرحنا اليوم
الكود برمجتي و تصميمي الطائر الحر
رجاء ترك تعليق مناسب يشجعنا على تقديم المزيد من الاكواد و البرمجيات و الافكار التى ترغبوا
لتطلبات التكويد و تصميم الاكواد
من هنا
https://deve-arab.yoo7.com/f34-montada
No comments: